export const DistributionSpeciesModal = ({ items }: { items: any[] }) => {
  const speciesMap: Record<number, string> = {
    1: "گاو",
    2: "گاومیش",
    3: "شتر",
    4: "گوسفند",
    5: "بز",
  };
  return (
    <div className="w-full">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {items?.map((item, index) => (
          <div
            key={index}
            className="rounded-xl border border-gray-200 dark:border-gray-700 p-4
                         bg-white dark:bg-gray-800
                         hover:shadow-sm transition"
          >
            <div className="flex items-center justify-between mb-3">
              <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
                گونه
              </span>
              <span className="text-sm font-semibold text-gray-800 dark:text-gray-100">
                {speciesMap[item?.species_code] ?? "-"}
              </span>
            </div>

            <div className="h-px bg-gray-100 dark:bg-gray-700 my-2" />

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600 dark:text-gray-400">
                  تعداد توزیع
                </span>
                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
                  {item?.dist_count?.toLocaleString() ?? 0}
                </span>
              </div>

              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600 dark:text-gray-400">
                  تعداد پلاک
                </span>
                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
                  {item?.tag_count?.toLocaleString() ?? 0}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
