"use client";

import { useState } from "react";
import { Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/Button";
import { IconButton } from "@/components/ui/IconButton";
import type { Experience } from "@/lib/types/cv";

interface ExperienceItemProps {
  index: number;
  experience: Experience;
  onEdit: () => void;
  onRemove: () => void;
}

export function ExperienceItem({
  index,
  experience,
  onEdit,
  onRemove,
}: ExperienceItemProps) {
  const [confirming, setConfirming] = useState(false);

  if (confirming) {
    return (
      <li className="flex items-center justify-between gap-2 rounded-md border border-danger/40 bg-red-50 px-3 py-2">
        <span className="text-sm text-ink">Supprimer cette expérience ?</span>
        <div className="flex shrink-0 gap-1.5">
          <Button
            variant="danger"
            size="sm"
            onClick={() => {
              setConfirming(false);
              onRemove();
            }}
          >
            Oui
          </Button>
          <Button variant="ghost" size="sm" onClick={() => setConfirming(false)}>
            Non
          </Button>
        </div>
      </li>
    );
  }

  return (
    <li className="flex items-center justify-between gap-2 rounded-md border border-border bg-white px-3 py-2">
      <span className="truncate text-sm text-ink">
        <span className="mr-1.5 text-muted">{index + 1}.</span>
        {experience.titre}
      </span>
      <div className="flex shrink-0 gap-0.5">
        <IconButton aria-label="Modifier l'expérience" onClick={onEdit}>
          <Pencil size={14} />
        </IconButton>
        <IconButton
          danger
          aria-label="Supprimer l'expérience"
          onClick={() => setConfirming(true)}
        >
          <Trash2 size={14} />
        </IconButton>
      </div>
    </li>
  );
}