// src/components/masterData/BarangGrid.tsx

import lang from "../../languages/language";

type Barang = {
  id: number;
  nama: string;
  foto: string;
  kondisi: string;
  tersedia: boolean;
  kategori: string;
};

type Props = {
  barangList: Barang[];
  onEdit: (barang: Barang) => void;
};

export default function BarangGrid({
  barangList,
  onEdit,
}: Props) {
  return (
    <div className="grid grid-cols-4 gap-6">
      {barangList.map((barang) => (
        <div
          key={barang.id}
          onClick={() => onEdit(barang)}
          className="bg-white rounded-3xl shadow-lg p-4 cursor-pointer hover:shadow-2xl transition"
        >
          {/* FOTO DINAMIS BERDASARKAN KATEGORI */}
          <div
            className={`w-full overflow-hidden rounded-2xl mb-4 bg-gray-100 ${
              barang.kategori === lang.electronics
                ? "aspect-square"
                : "aspect-[2/3]"
            }`}
          >
            <img
              src={barang.foto}
              alt={barang.nama}
              className="w-full h-full object-cover"
            />
          </div>

          {/* NAMA */}
          <h2 className="text-lg font-bold text-black mb-2">
            {barang.nama}
          </h2>

          {/* KATEGORI */}
          <p className="text-sm text-blue-600 font-medium mb-1">
            {barang.kategori}
          </p>
          {/* KONDISI */}
          <p className="text-gray-600">
            {lang.condition}: {barang.kondisi}
          </p>

          {/* STATUS */}
          <p
            className={`text-sm font-medium ${
              barang.tersedia
                ? "text-green-600"
                : "text-red-500"
            }`}
          >
            {barang.tersedia
              ? lang.available
              : lang.notAvailable}
          </p>
        </div>
      ))}
    </div>
  );
}