import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Pencil, Trash } from "lucide-react"
import React from "react"

type PopularityCategory = "محبوب ترین" | "محبوب" | "معمولی" | "کم محبوب";

interface Company {
  id: number | null;
  name: string;
  description: string;
  popularity: string;
}

const popularityColors: Record<PopularityCategory, string> = {
  "محبوب ترین": "bg-green-500",
  "محبوب": "bg-blue-500",
  "معمولی": "bg-yellow-500",
  "کم محبوب": "bg-red-500"
};

interface CompanyItemProps {
  company: Company;
  setCurrentCompany: (company: Company) => void;
  setIsDialogOpen: (open: boolean) => void;
  setCompanies: (companies: Company[]) => void;
  companies: Company[];
}

const CompanyItem: React.FC<CompanyItemProps> = ({
  company,
  setCurrentCompany,
  setIsDialogOpen,
  setCompanies,
  companies
}) => (
  <div className="flex justify-between p-3 border rounded-lg">
    <div>
      <div className="flex items-center gap-2">
        <h3 className="font-medium">{company.name}</h3>
        <Badge variant="outline" className={`${popularityColors[company.popularity as PopularityCategory]} text-white`}>
          {company.popularity}
        </Badge>
      </div>
      <p className="text-sm text-muted-foreground">{company.description}</p>
    </div>
    <div className="flex gap-1">
      {company.id !== null && (
        <>
          <Button variant="ghost" size="icon" onClick={() => {
            setCurrentCompany({ ...company });
            setIsDialogOpen(true);
          }}><Pencil size={16} /></Button>
          <Button variant="ghost" size="icon" onClick={() =>
            setCompanies(companies.filter(c => c.id !== company.id))
          }><Trash size={16} /></Button>
        </>
      )}
    </div>
  </div>
);

export default CompanyItem;