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

interface FindingOneGuideProps extends React.ComponentProps<typeof Card> {
  header?: {
    emoji?: TypographyProps<"span">;
    title?: TypographyProps<"h3">;
  };
  text?: TypographyProps<"p">;
  blur?: React.ComponentProps<"div"> & {
    text?: TypographyProps<"p">;
    icon?: React.ReactNode;
  };
}

export default function FindingOneGuide({
  header,
  text,
  blur,
  ...props
}: FindingOneGuideProps) {
  return (
    <Card {...props} className={cn("p-[21px]", props.className)}>
      {header && (
        <div className="w-full flex items-center justify-items-start gap-[5px]">
          {header.emoji && (
            <Typography as="span" size="2xl" {...header.emoji} />
          )}
          {header.title && (
            <Typography
              as="h3"
              weight="bold"
              font="inter"
              {...header.title}
              className={cn(
                "text-[18px] text-trial-payment-foreground",
                header.title.className
              )}
            />
          )}
        </div>
      )}
      <div className="w-full relative mt-2.5">
        {text && (
          <Typography
            font="inter"
            size="sm"
            {...text}
            className={cn("text-[#43464C]", text.className)}
          />
        )}
        {blur && (
          <div
            className={cn(
              "absolute bottom-[-21px] left-[50%] translate-x-[-50%]",
              "p-8 pb-[50px]",
              "bg-[#F8FAFC8F]",
              "backdrop-blur-xs",
              "rounded-[16px]",
              "flex flex-col items-center justify-center gap-2",
              "w-[calc(100%+42px)]"
            )}
          >
            {blur?.icon}
            {blur.text && (
              <Typography
                as="p"
                font="inter"
                weight="medium"
                align="center"
                className="text-[#A16207]"
                {...blur.text}
              />
            )}
          </div>
        )}
      </div>
    </Card>
  );
}
