import { DollarSignIcon, UtensilsIcon } from "lucide-react"

interface Order {
  name: string
  price: string
  items: string
  sale: string
  remaining: string
}

const ORDERS: Order[] = [
  { name: "Pizza", price: "240.87 F", items: "11 k PC", sale: "9.6 F", remaining: "11.12 k" },
  { name: "Burger", price: "240.87 F", items: "12 k PC", sale: "11.12 F", remaining: "11.12 k" },
  { name: "Cake", price: "240.87 F", items: "15 k PC", sale: "1.2 F", remaining: "11.12 k" },
  { name: "Salad", price: "240.87 F", items: "9 k PC", sale: "9.3 F", remaining: "11.12 k" },
]

export default function RecentOrdersTable() {
  return (
    <div className="rounded-2xl border border-border bg-white overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border bg-muted/30">
              <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground">Nom</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground">Quantité</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground">Vente totale</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground">Restant</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {ORDERS.map((order) => (
              <tr key={order.name} className="hover:bg-primary/5 transition-colors">
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2.5">
                    <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <UtensilsIcon className="size-4" />
                    </div>
                    <div>
                      <p className="font-medium text-foreground">{order.name}</p>
                      <p className="text-xs text-muted-foreground">{order.price}</p>
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3 text-foreground/80">{order.items}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-1.5">
                    <div className="flex size-5 items-center justify-center rounded-full bg-primary/10">
                      <DollarSignIcon className="size-3 text-primary" />
                    </div>
                    <span className="text-foreground/80">{order.sale}</span>
                  </div>
                </td>
                <td className="px-4 py-3 text-foreground/80">{order.remaining}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}