"use client";

import type { FloorTable } from "@/data/platform-mock";
import { cn } from "@/lib/utils";

import { TableStatusBadge, tableBorderClass } from "@/app/(operations)/operations/_components/ops-status-badge";

export function FloorOverviewGrid({ tables }: { tables: FloorTable[] }) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
      {tables.map((table) => (
        <div
          key={table.id}
          className={cn("rounded-xl border-2 p-4", tableBorderClass(table.status))}
        >
          <div className="flex items-start justify-between">
            <p className="text-xl font-bold">T{table.number}</p>
            <TableStatusBadge status={table.status} />
          </div>
          <p className="mt-1 text-xs text-muted-foreground">Seats {table.capacity}</p>
          {table.guestName && (
            <p className="mt-2 truncate text-sm font-medium">{table.guestName}</p>
          )}
        </div>
      ))}
    </div>
  );
}