import React from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../ui/table";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { Plus } from "lucide-react";

export function MultipleOptionsView() {
  const options = [
    {
      id: 1,
      name: 'Prepped By',
      contents: 'A. Smith; B. Doe; C. Borne',
      lastEdited: '2025.12.03.11:45',
    },
    {
      id: 2,
      name: 'Checked By',
      contents: 'D. Manager; E. Supervisor',
      lastEdited: '2025.12.04.09:30',
    },
    {
      id: 3,
      name: 'Allergens',
      contents: 'Peanuts; Dairy; Gluten; Soy',
      lastEdited: '2025.12.05.14:15',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Top Controls - single row, style consistent with other Label views */}
      <div className="flex flex-nowrap items-center gap-3">
        <Input
          placeholder="Search"
          style={{ height: 40, boxSizing: 'border-box' }}
          className="bg-white border border-gray-300 rounded-md w-40 shrink-0 placeholder:text-gray-500"
        />
        <Select defaultValue="all">
          <SelectTrigger className="bg-white border border-gray-300 rounded-md w-[200px] shrink-0" style={{ height: 40, boxSizing: 'border-box' }}>
            <SelectValue placeholder="Location" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Locations</SelectItem>
            <SelectItem value="loc-a">Location A</SelectItem>
            <SelectItem value="loc-b">Location B</SelectItem>
          </SelectContent>
        </Select>
        <Button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md h-10 px-6 shrink-0 ml-auto">
          New Multiple Options <Plus className="ml-1 h-4 w-4" />
        </Button>
      </div>

      {/* Table */}
      <div className="rounded-md border bg-white shadow-sm">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50 hover:bg-gray-50">
              <TableHead className="font-bold text-gray-900 w-[200px]">Multiple Option Name</TableHead>
              <TableHead className="font-bold text-gray-900">Contents</TableHead>
              <TableHead className="font-bold text-gray-900 w-[180px]">Last Edited</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {options.map((item) => (
              <TableRow key={item.id} className="hover:bg-gray-50">
                <TableCell className="font-medium">{item.name}</TableCell>
                <TableCell className="text-gray-600">{item.contents}</TableCell>
                <TableCell className="text-gray-500 tabular-nums font-numeric">{item.lastEdited}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
