import type { ResumeTemplateId } from "@/types/resume";
import { resumeTemplates } from "./ResumeRenderer";

export function TemplateSelector({
  selectedTemplateId,
  onSelect,
}: {
  selectedTemplateId: ResumeTemplateId;
  onSelect: (templateId: ResumeTemplateId) => void;
}) {
  return (
    <div className="flex w-full flex-col gap-3 rounded-lg">
      {resumeTemplates.map((template) => {
        const selected = template.id === selectedTemplateId;
        return (
          <button
            type="button"
            onClick={() => onSelect(template.id)}
            key={template.id}
            className={`flex min-h-32 cursor-pointer items-center gap-3 rounded-xl border-2 p-3 text-left transition-all duration-200 ${selected ? "border-primary bg-blue-50 shadow-md" : "border-transparent bg-white hover:border-gray-300 hover:shadow-sm"}`}
          >
            <div className="flex items-center gap-2">
              <div className="rounded-lg bg-slate-100 p-3">
                <div
                  className="bg-white"
                  style={{
                    width:
                      template.id === "modern-portrait" ? "3.75rem" : "5rem",
                    height:
                      template.id === "modern-portrait" ? "5rem" : "2.5rem",
                  }}
                />
              </div>
              <div className="min-w-0 flex-1">
                <p className="font-semibold">{template.name}</p>
                <p className="mt-1 text-xs leading-relaxed text-gray-500">
                  {template.description}
                </p>
              </div>
            </div>
            <span
              aria-label={`Select ${template.name}`}
              aria-hidden="true"
              className={`ml-auto flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors ${selected ? "border-primary" : "border-gray-300"}`}
            >
              {selected && (
                <span className="bg-primary h-2.5 w-2.5 rounded-full" />
              )}
            </span>
          </button>
        );
      })}
    </div>
  );
}