import Link from "next/link";
import { ChatCircleDots as MessageCircle, LockSimple as Lock } from "@phosphor-icons/react/dist/ssr";

import { getReadableTextColor } from "@/lib/color-contrast";

import CabecalhoDosMembros from "./CabecalhoDosMembros";
import { temaDosMembros } from "./tema";

/*
 * Quando o curso não abre para quem chegou (acesso fechado, curso que não é
 * dele, aula que não existe): o motivo em português e o caminho de volta.
 */
export default function AvisoDosMembros({
  slug,
  nomeDaArea,
  cor,
  escuro,
  pessoa,
  titulo,
  texto,
  acao,
  whatsapp,
}: {
  slug: string;
  nomeDaArea: string;
  cor: string;
  escuro: boolean;
  pessoa: { nome: string } | null;
  titulo: string;
  texto: string;
  acao?: { rotulo: string; href: string } | null;
  whatsapp?: string | null;
}) {
  const tema = temaDosMembros(escuro);
  return (
    <div className={`flex min-h-screen flex-col ${tema.fundo}`}>
      <CabecalhoDosMembros slug={slug} nomeDaArea={nomeDaArea} cor={cor} tema={tema} pessoa={pessoa} ativo="nenhum" />
      <main className="flex flex-1 items-center justify-center px-4 py-12">
        <div className={`w-full max-w-[460px] rounded-[22px] border p-6 text-center sm:p-8 ${tema.cartao}`}>
          <span className={`mx-auto flex h-12 w-12 items-center justify-center rounded-full ${tema.realce}`}>
            <Lock className="h-5 w-5" style={{ color: cor }} />
          </span>
          <h1 className="mt-4 text-[21px] font-bold leading-tight">{titulo}</h1>
          <p className={`mt-2 text-[14px] leading-6 ${tema.suave}`}>{texto}</p>
          <div className="mt-6 flex flex-col gap-2.5">
            {acao ? (
              <Link
                href={acao.href}
                className="inline-flex h-11 items-center justify-center rounded-xl px-5 text-[14px] font-bold transition hover:opacity-90"
                style={{ backgroundColor: cor, color: getReadableTextColor(cor) }}
              >
                {acao.rotulo}
              </Link>
            ) : null}
            <Link href={`/${slug}/membros`} className={`inline-flex h-11 items-center justify-center rounded-xl border px-5 text-[14px] font-semibold ${tema.linha}`}>
              Ir para a área de membros
            </Link>
            {whatsapp ? (
              <a
                href={`https://wa.me/${whatsapp}?text=${encodeURIComponent("Olá! Preciso de ajuda com o acesso a um conteúdo.")}`}
                target="_blank"
                rel="noopener noreferrer"
                className={`mt-1 inline-flex items-center justify-center gap-1.5 text-[13px] font-semibold ${tema.suave} hover:opacity-80`}
              >
                <MessageCircle className="h-4 w-4" />
                Falar com a loja pelo WhatsApp
              </a>
            ) : null}
          </div>
        </div>
      </main>
    </div>
  );
}