import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import { cva, VariantProps } from "class-variance-authority";
import React, { useId } from "react";

const textListVariants = cva("", {
  variants: {
    listStyleType: {
      decimal: "list-decimal pl-6",
      disc: "list-disc pl-6",
      image: "list-image pl-6",
      none: "list-none pl-0",
    },
  },
  defaultVariants: {
    listStyleType: "disc",
  },
});

interface TextListProps
  extends React.ComponentProps<"ul">,
    VariantProps<typeof textListVariants> {
  items?: TypographyProps<"li">[];
  itemProps?: Partial<TypographyProps<"li">>;
  markerImage?: string;
  customMarker?: React.ReactNode;
}

export default function TextList({
  items,
  itemProps,
  listStyleType,
  markerImage,
  customMarker,
  ...props
}: TextListProps) {
  const itemId = useId();
  return (
    <ul
      {...props}
      className={cn(
        textListVariants({ listStyleType }),
        markerImage && `list-image-[url(${markerImage})]`,
        props.className
      )}
    >
      {items?.map((item, index) => (
        <Typography
          as="li"
          {...itemProps}
          {...item}
          key={`${itemId}-${index}`}
          className={cn(
            "list-item text-trial-payment-foreground",
            customMarker && "relative",
            item.className
          )}
        >
          {customMarker && (
            <React.Fragment key={`marker-${index}`}>
              {customMarker}
            </React.Fragment>
          )}
          {item.children || itemProps?.children}
        </Typography>
      ))}
    </ul>
  );
}
