import Link from "next/link";
import type { LucideIcon } from "lucide-react";

import { PageHeader } from "@/components/ui/page-header";

/*
 * As partes da área "Produtos digitais" que chegam na próxima etapa (cursos e
 * comentários das aulas). A entrada já fica no menu, com o que vem e quando.
 */
export function ProximaEtapa({
  eyebrow,
  titulo,
  texto,
  Icone,
  itens,
}: {
  eyebrow: string;
  titulo: string;
  texto: string;
  Icone: LucideIcon;
  itens: string[];
}) {
  return (
    <div className="space-y-5">
      <PageHeader eyebrow={eyebrow} title={titulo} subtitle={texto} />
      <section className="flex flex-col items-start gap-4 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] p-6 shadow-[var(--ks-shadow-subtle)] sm:flex-row">
        <span
          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-white"
          style={{ background: "linear-gradient(135deg, var(--ks-brand-500) 0%, var(--ks-brand-700) 100%)" }}
        >
          <Icone size={22} />
        </span>
        <div className="min-w-0">
          <p className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">Chega na próxima etapa</p>
          <ul className="mt-2 space-y-1.5 text-sm text-[var(--ks-color-text-secondary)]">
            {itens.map((item) => (
              <li key={item} className="flex gap-2">
                <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--ks-brand-500)]" />
                {item}
              </li>
            ))}
          </ul>
          <p className="mt-4 text-sm text-[var(--ks-color-text-muted)]">
            Enquanto isso, arquivos para baixar e links de acesso já vendem e entregam sozinhos.{" "}
            <Link href="/dashboard/digitais/produtos" className="font-semibold text-[var(--ks-brand-600)] hover:underline">
              Ver produtos digitais
            </Link>
          </p>
        </div>
      </section>
    </div>
  );
}