"use client";

import { FileText, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface AttachmentItemProps {
  name: string;
  uploadDate: string;
  onDownload: () => void;
  onDelete: () => void;
  deleteLabel: string;
  className?: string;
}

export function AttachmentItem({
  name,
  uploadDate,
  onDownload,
  onDelete,
  deleteLabel,
  className,
}: AttachmentItemProps) {
  return (
    <div
      className={cn(
        "flex items-center gap-3 rounded-lg border border-border bg-card p-4",
        className
      )}
    >
      {/* File Icon */}
      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
        <FileText className="h-5 w-5 text-blue-500" />
      </div>

      {/* File Info */}
      <button
        onClick={onDownload}
        className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-start hover:opacity-80 transition-opacity"
      >
        <span className="truncate text-sm font-medium text-foreground">
          {name}
        </span>
        <span className="text-xs text-muted-foreground">{uploadDate}</span>
      </button>

      {/* Delete Button */}
      <Button
        variant="outline"
        size="sm"
        onClick={onDelete}
        className="shrink-0 gap-2 border-red-500 text-red-500 hover:bg-red-500/10 hover:text-red-600"
      >
        <Trash2 className="h-4 w-4" />
        {deleteLabel}
      </Button>
    </div>
  );
}