import { Button } from "@/components/ui/button";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import Link from "next/link";

interface LegalProps extends Omit<React.ComponentProps<"div">, "title"> {
  links?: (React.ComponentProps<typeof Button> & { href: string })[];
  copyright?: TypographyProps<"p">;
  title?: TypographyProps<"h3">;
}

export default function Legal({
  links,
  copyright,
  title,
  ...props
}: LegalProps) {
  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 flex-col gap-2">
        {links &&
          links.map((link, index) => (
            <Button
              variant="link"
              asChild
              {...link}
              key={link.href + index}
              className={cn(
                "text-[#6B7280] text-sm/5 font-inter font-bold no-underline!",
                link.className
              )}
            >
              <Link href={link.href}>{link.children}</Link>
            </Button>
          ))}
      </div>
      {copyright && (
        <Typography
          as="p"
          font="inter"
          size="xs"
          {...copyright}
          className={cn("text-[#6B7280]", copyright.className)}
        />
      )}
    </div>
  );
}