import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import Image from "next/image";

interface PaymentMethodsProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  methods?: React.ComponentProps<typeof Image>[];
}

export default function PaymentMethods({
  title,
  methods,
  ...props
}: PaymentMethodsProps) {
  return (
    <div {...props} className={cn("flex flex-col gap-4", props.className)}>
      {title && (
        <Typography
          as="h3"
          font="inter"
          align="left"
          weight="bold"
          {...title}
          className={cn(
            "leading-[24px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      <div className="flex items-center gap-4">
        {methods &&
          methods.map((method, index) => (
            <Image
              width={34}
              height={27}
              {...method}
              alt={method.alt}
              key={index}
            />
          ))}
      </div>
    </div>
  );
}
