interface Props {
  columns: any[];
  data: any[];
  onEdit: (row: any) => void;
  onDelete: (row: any) => void;
}

export function ReferentielTable({
  columns,
  data,
  onEdit,
  onDelete
}: Props) {
  return (
    <div className="overflow-auto rounded-2xl border border-[#dce8e2] bg-white shadow-sm">
      <table className="w-full text-sm">
        <thead className="sticky top-0 z-10">
          <tr className="bg-[#f4f8f6] text-[#1f5f4a] border-b border-[#dce8e2]">
            {columns.map((column) => (
              <th
                key={column.key}
                className="px-5 py-3 text-left font-semibold tracking-wide"
              >
                {column.label}
              </th>
            ))}

            <th className="px-5 py-3 text-left font-semibold">
              Actions
            </th>
          </tr>
        </thead>

        <tbody className="divide-y divide-[#edf3ef]">
          {data.map((row) => (
            <tr
              key={row.id}
              className="hover:bg-[#f3faf7] transition-colors duration-150"
            >
              {columns.map((column) => (
                <td
                  key={column.key}
                  className="px-5 py-3 text-[#2f5d4b]"
                >
                  {row[column.key]}
                </td>
              ))}

              <td className="px-5 py-3">
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => onEdit(row)}
                    className="
        px-1 py-1
        rounded-xl
        bg-[#2f7d5f]
        text-white text-sm font-medium
        hover:bg-[#256b52]
        transition
        cursor-pointer
      "
                  >
                    Modifier
                  </button>

                  <button
                    onClick={() => onDelete(row)}
                    className="px-3 py-1.5
    text-xs font-semibold
    rounded-lg
    text-red-600
    bg-white
    border border-red-200
    hover:bg-red-50
    hover:border-red-300
    hover:shadow-sm
    active:scale-[0.98]
    transition
    cursor-pointer"
                  >
                    Supprimer
                  </button>
                </div>
              </td>
            </tr>
          ))}
          {data.length === 0 && (
            <tr>
              <td colSpan={columns.length + 1} className="text-center py-10 text-[#6b7f77]">
                Aucun élément trouvé
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}