import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import TextList from "@/components/widgets/TextList/TextList";
import { cn } from "@/lib/utils";

interface TryForDaysProps extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  textListProps?: React.ComponentProps<typeof TextList>;
}

export default function TryForDays({
  title,
  textListProps,
  ...props
}: TryForDaysProps) {
  return (
    <div {...props}>
      {title && (
        <Typography as="h3" size="xl" weight="bold" font="inter" {...title} />
      )}
      {textListProps && (
        <TextList
          itemProps={{
            font: "inter",
            weight: "regular",
            size: "sm",
            className: "text-trial-payment-foreground ml-30px",
          }}
          customMarker={
            <svg
              width="14"
              height="15"
              viewBox="0 0 14 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="absolute left-[-26px] top-1.5"
            >
              <path
                d="M7 14.75C8.85652 14.75 10.637 14.0125 11.9497 12.6997C13.2625 11.387 14 9.60652 14 7.75C14 5.89348 13.2625 4.11301 11.9497 2.80025C10.637 1.4875 8.85652 0.75 7 0.75C5.14348 0.75 3.36301 1.4875 2.05025 2.80025C0.737498 4.11301 0 5.89348 0 7.75C0 9.60652 0.737498 11.387 2.05025 12.6997C3.36301 14.0125 5.14348 14.75 7 14.75ZM10.0898 6.46484L6.58984 9.96484C6.33281 10.2219 5.91719 10.2219 5.66289 9.96484L3.91289 8.21484C3.65586 7.95781 3.65586 7.54219 3.91289 7.28789C4.16992 7.03359 4.58555 7.03086 4.83984 7.28789L6.125 8.57305L9.16016 5.53516C9.41719 5.27812 9.83281 5.27812 10.0871 5.53516C10.3414 5.79219 10.3441 6.20781 10.0871 6.46211L10.0898 6.46484Z"
                fill="#1047A2"
              />
            </svg>
          }
          {...textListProps}
          className={cn(
            "mt-[17px] pl-[37px] space-y-3",
            textListProps.className
          )}
        />
      )}
    </div>
  );
}