export default function Table() {
  const invoices = [
    {
      invoice: "INV001",
      paymentStatus: "Paid",
      totalAmount: "$250.00",
      paymentMethod: "Credit Card",
    },
    {
      invoice: "INV002",
      paymentStatus: "Pending",
      totalAmount: "$150.00",
      paymentMethod: "PayPal",
    },
    {
      invoice: "INV003",
      paymentStatus: "Unpaid",
      totalAmount: "$350.00",
      paymentMethod: "Bank Transfer",
    },
    {
      invoice: "INV004",
      paymentStatus: "Paid",
      totalAmount: "$450.00",
      paymentMethod: "Credit Card",
    },
    {
      invoice: "INV005",
      paymentStatus: "Paid",
      totalAmount: "$550.00",
      paymentMethod: "PayPal",
    },
  ]

  return (
    <div className="w-full">
      <div className="relative w-full overflow-auto">
        <table className="w-full caption-bottom text-sm">
          <thead className="[&_tr]:border-b">
            <tr className="border-b border-zinc-200 transition-colors hover:bg-zinc-100/50 data-[state=selected]:bg-zinc-100 dark:border-zinc-800 dark:hover:bg-zinc-800/50 dark:data-[state=selected]:bg-zinc-800">
              <th className="h-12 px-4 text-left align-middle font-medium text-zinc-500 dark:text-zinc-400">Invoice</th>
              <th className="h-12 px-4 text-left align-middle font-medium text-zinc-500 dark:text-zinc-400">Status</th>
              <th className="h-12 px-4 text-left align-middle font-medium text-zinc-500 dark:text-zinc-400">Method</th>
              <th className="h-12 px-4 text-right align-middle font-medium text-zinc-500 dark:text-zinc-400">Amount</th>
            </tr>
          </thead>
          <tbody className="[&_tr:last-child]:border-0">
            {invoices.map((invoice) => (
              <tr
                key={invoice.invoice}
                className="border-b border-zinc-200 transition-colors hover:bg-zinc-100/50 data-[state=selected]:bg-zinc-100 dark:border-zinc-800 dark:hover:bg-zinc-800/50 dark:data-[state=selected]:bg-zinc-800"
              >
                <td className="p-4 align-middle font-medium text-zinc-900 dark:text-zinc-50">{invoice.invoice}</td>
                <td className="p-4 align-middle text-zinc-600 dark:text-zinc-300">{invoice.paymentStatus}</td>
                <td className="p-4 align-middle text-zinc-600 dark:text-zinc-300">{invoice.paymentMethod}</td>
                <td className="p-4 align-middle text-right text-zinc-600 dark:text-zinc-300">{invoice.totalAmount}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00