"use client";

import { Check, X } from "lucide-react";
import type { ProjectSummary } from "@/domain/design";
import { useI18n } from "@/i18n/i18n";
import { ProjectThumb } from "@/ui/components/ProjectThumb";

type ProjectCardProps = {
  project: ProjectSummary;
  editMode?: boolean;
  selected?: boolean;
  onActivate: () => void;
  onDelete?: () => void;
};

export function ProjectCard({ project, editMode = false, selected = false, onActivate, onDelete }: ProjectCardProps) {
  const { t, locale } = useI18n();

  return (
    <div className={`project-card-shell ${editMode ? "is-selecting" : ""} ${selected ? "selected" : ""}`}>
      {editMode && (
        <span className="project-card-selection" aria-hidden="true">
          {selected && <Check size={14} />}
        </span>
      )}
      <button className="project-card" onClick={onActivate} aria-pressed={editMode ? selected : undefined}>
        <ProjectThumb variant={project.thumbnail} />
        {!editMode && <span className="project-card-overlay">{t("continueEditing")}</span>}
        <strong>{project.title}</strong>
        <small>{formatProjectDate(project.updatedAt, locale)}</small>
      </button>
      {!editMode && onDelete && (
        <button className="project-delete-button" aria-label={t("contextDelete")} onClick={onDelete}>
          <X size={14} />
        </button>
      )}
    </div>
  );
}

function formatProjectDate(value: string, locale: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(date);
}