"use client";

import { deleteVorlageFlaechendruck } from "./action";

export default function Table({
  data,
}: {
  data: {
    id: number;
    printer: string;
    product_type: string;
    height: number;
    width: number;
    coordinates: {
      x: number;
      y: number;
      rotation: number;
    }[];
  }[];
}) {
  async function onDelete(id: number) {
    try {
      await deleteVorlageFlaechendruck(id);

      window.location.reload();
    } catch (error) {
      console.error(error);
      alert("An error occurred while deleting the item.");
    }
  }
  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <div className="overflow-x-auto">
        <table className="table-auto border-collapse border border-gray-300 w-full bg-white shadow-md rounded-lg">
          <thead>
            <tr className="bg-gray-100 text-gray-700">
              <th className="border border-gray-300 px-4 py-2">Printer</th>
              <th className="border border-gray-300 px-4 py-2">Product Type</th>
              <th className="border border-gray-300 px-4 py-2">Height</th>
              <th className="border border-gray-300 px-4 py-2">Width</th>
              <th className="border border-gray-300 px-4 py-2">Coordinates</th>
              <th className="border border-gray-300 px-4 py-2">Actions</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item) => (
              <tr
                key={item.id}
                className="hover:bg-gray-50 transition duration-200"
              >
                <td className="border border-gray-300 px-4 py-2 text-center">
                  {item.printer}
                </td>
                <td className="border border-gray-300 px-4 py-2 text-center">
                  {item.product_type}
                </td>
                <td className="border border-gray-300 px-4 py-2 text-center">
                  {item.height}
                </td>
                <td className="border border-gray-300 px-4 py-2 text-center">
                  {item.width}
                </td>
                <td className="border border-gray-300 px-4 py-2 text-center">
                  <ul className="list-disc list-inside">
                    {item.coordinates.map((coord, index) => (
                      <li key={index} className="text-sm text-gray-600">
                        X: {coord.x}, Y: {coord.y}, Rotation: {coord.rotation}
                      </li>
                    ))}
                  </ul>
                </td>
                <td className="border border-gray-300 px-4 py-2 text-center">
                  <button
                    onClick={() => onDelete(item.id)}
                    className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition duration-200"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}