"use client";

import React from "react";
import { GripVertical, Pencil, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { WorkItem } from "../types";

interface WorkItemCardProps {
  item: WorkItem;
  isSelected: boolean;
  readonly?: boolean;
  onClick: () => void;
  onEdit: () => void;
  onDelete: () => void;
}

export function WorkItemCard({
  item,
  isSelected,
  readonly,
  onClick,
  onEdit,
  onDelete,
}: WorkItemCardProps) {
  return (
    <div
      onClick={onClick}
      className={cn(
        "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
        "hover:border-primary/30 hover:shadow-sm",
        isSelected
          ? "border-primary bg-primary/5 shadow-sm"
          : "border-border bg-card"
      )}
    >
      <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />

      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate text-sm font-medium">{item.title}</span>
        </div>
        <div className="mt-1 flex items-center gap-2">
          <Badge
            variant="secondary"
            className="h-5 px-1.5 text-[10px] font-normal"
          >
            {item.detail_count}개
          </Badge>
          <Badge
            variant={item.is_required === "Y" ? "default" : "outline"}
            className="h-5 px-1.5 text-[10px] font-normal"
          >
            {item.is_required === "Y" ? "필수" : "선택"}
          </Badge>
        </div>
      </div>

      {!readonly && (
        <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6"
            onClick={(e) => {
              e.stopPropagation();
              onEdit();
            }}
          >
            <Pencil className="h-3 w-3" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-destructive hover:text-destructive"
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
          >
            <Trash2 className="h-3 w-3" />
          </Button>
        </div>
      )}
    </div>
  );
}
