import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import {
  Contacts,
  Legal,
  PaymentMethods,
} from "@/components/domains/TrialPayment";

interface FooterProps extends Omit<React.ComponentProps<"footer">, "title"> {
  title?: TypographyProps<"h3">;
  contacts?: React.ComponentProps<typeof Contacts>;
  legal?: React.ComponentProps<typeof Legal>;
  paymentMethods?: React.ComponentProps<typeof PaymentMethods>;
}

export default function Footer({
  title,
  contacts,
  legal,
  paymentMethods,
  ...props
}: FooterProps) {
  return (
    <footer
      {...props}
      className={cn("w-full flex flex-col gap-8", props.className)}
    >
      {title && (
        <Typography
          as="h3"
          font="inter"
          size="2xl"
          align="center"
          weight="bold"
          {...title}
          className={cn(
            "leading-[32px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      {contacts && <Contacts {...contacts} />}
      {legal && <Legal {...legal} />}
      {paymentMethods && <PaymentMethods {...paymentMethods} />}
    </footer>
  );
}
