import { Link } from "@tanstack/react-router";
import { useConsent } from "@/lib/consent";

export function CtaButtons() {
  return (
    <div className="flex flex-wrap gap-5">
      <Link to="/cadastre-sua-startup" className="rounded-[4px] border-2 border-navy bg-navy px-6 py-2.5 text-[15px] font-semibold text-primary-foreground">
        Cadastre sua Startup
      </Link>
    </div>
  );
}

export function YouTube({ id, title }: { id: string; title: string }) {
  const { consent, save } = useConsent();
  return (
    <div className="relative aspect-video w-full overflow-hidden bg-footer-bottom">
      {consent.marketing ? (
        <iframe className="absolute inset-0 h-full w-full" src={`https://www.youtube.com/embed/${id}`} title={title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
      ) : (
        <>
          <img src={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`} alt={title} className="absolute inset-0 h-full w-full object-cover" />
          <button onClick={() => save({ statistics: consent.statistics, marketing: true })}
            className="absolute inset-x-0 bottom-0 bg-navy/95 px-4 py-2 text-center text-[13px] text-primary-foreground">
            Clique para aceitar os cookies marketing e ativar este conteúdo
          </button>
        </>
      )}
    </div>
  );
}