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

export interface PrivacyTermsConsentProps
  extends Omit<React.ComponentProps<typeof Typography>, "children"> {
  privacyPolicy?: React.ComponentProps<typeof Button> & { href: string };
  termsOfUse?: React.ComponentProps<typeof Button> & { href: string };
}

export default function PrivacyTermsConsent({
  privacyPolicy,
  termsOfUse,
  ...props
}: PrivacyTermsConsentProps) {
  return (
    <Typography
      as="p"
      size="xs"
      font="inter"
      color="muted"
      {...props}
      align="center" // Принудительно центрируем - после props чтобы переопределить
      className={cn("[&_a]:font-medium", props.className)}
    >
      I agree to the{" "}
      {privacyPolicy && (
        <Button variant="link" asChild {...privacyPolicy}>
          <Link href={privacyPolicy.href}>{privacyPolicy.children}</Link>
        </Button>
      )}
      {", "}
      {termsOfUse && (
        <Button variant="link" asChild {...termsOfUse}>
          <Link href={termsOfUse.href}>{termsOfUse.children}</Link>
        </Button>
      )}{" "}
      and to the use of cookies and tracking technologies, that require your
      consent
    </Typography>
  );
}
