import Image from "next/image";
import { SCREENSHOT_BY_PROJECT_ID } from "./story/notebookProjects";

type CoverProject = { id: string; title: string };

const SCREENSHOTS: Record<string, string | undefined> =
  SCREENSHOT_BY_PROJECT_ID;

function initials(title: string) {
  return title
    .split(/\s+/)
    .filter((word) => word.length > 2 || /^[A-Z]/.test(word))
    .slice(0, 2)
    .map((word) => word[0])
    .join("")
    .toUpperCase();
}

/**
 * Capa do card de projeto: a captura de tela real quando existe; sem captura, um painel gerado em código
 * (só o monograma, sem repetir a stack que já aparece nas tags do card) em vez de uma imagem inventada.
 */
export function ProjectCover({
  project,
  priority = false,
}: {
  project: CoverProject;
  priority?: boolean;
}) {
  const src = SCREENSHOTS[project.id];

  if (src) {
    return (
      <div className="ds-cover">
        <Image
          src={src}
          alt={`Captura de tela de ${project.title}`}
          width={1600}
          height={1000}
          sizes="(min-width: 1360px) 33vw, (min-width: 1025px) 50vw, 100vw"
          priority={priority}
        />
      </div>
    );
  }

  return (
    <div className="ds-cover ds-cover-fallback" aria-hidden="true">
      <span className="ds-cover-mark">{initials(project.title)}</span>
    </div>
  );
}