import { ComponentProps, ReactNode } from "react";
import Stack from "../layout/Stack copy";
import Row from "../layout/Row";
import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
import Span from "../layout/Span";
import { twMerge } from "tailwind-merge";

type BulletPoint = {
    title: string;
    icon?: ReactNode;
};

export type TWUI_CHECK_BULLET_POINTS_PROPS = ComponentProps<typeof Stack> & {
    bulletPoints: BulletPoint[];
    bulletWrapperProps?: ComponentProps<typeof Row>;
    iconProps?: ComponentProps<typeof CheckCircle2>;
    titleProps?: ComponentProps<typeof Span>;
};

/**
 * # Check Bullet Points Component
 * @className_wrapper twui-check-bullet-points-wrapper
 */
export default function CheckBulletPoints({
    bulletPoints,
    bulletWrapperProps,
    iconProps,
    titleProps,
    ...props
}: TWUI_CHECK_BULLET_POINTS_PROPS) {
    return (
        <Stack {...props} className={twMerge("gap-3", props.className)}>
            {bulletPoints.map((bulletPoint, index) => {
                return (
                    <Row
                        key={index}
                        {...bulletWrapperProps}
                        className={twMerge(
                            "gap-2 xl:flex-nowrap",
                            bulletWrapperProps?.className
                        )}
                    >
                        {bulletPoint.icon || (
                            <CheckCircle2
                                className="text-success min-w-[20px]"
                                size={20}
                                {...iconProps}
                            />
                        )}
                        <Span
                            {...titleProps}
                            className={twMerge("", titleProps?.className)}
                        >
                            {bulletPoint.title}
                        </Span>
                    </Row>
                );
            })}
        </Stack>
    );
}