import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { MoreHorizontal } from "lucide-react"
import type { Payment } from "@/types/dashboard"

interface PaymentsTableProps {
  payments: Payment[]
}

export function PaymentsTable({ payments }: PaymentsTableProps) {
  const getCategoryColor = (category: Payment["category"]) => {
    switch (category) {
      case "groceries":
        return "bg-green-500/15 text-green-500 hover:bg-green-500/20"
      case "utilities":
        return "bg-blue-500/15 text-blue-500 hover:bg-blue-500/20"
      case "transport":
        return "bg-purple-500/15 text-purple-500 hover:bg-purple-500/20"
      case "entertainment":
        return "bg-pink-500/15 text-pink-500 hover:bg-pink-500/20"
      case "shopping":
        return "bg-orange-500/15 text-orange-500 hover:bg-orange-500/20"
      case "insurance":
        return "bg-red-500/15 text-red-500 hover:bg-red-500/20"
      case "housing":
        return "bg-yellow-500/15 text-yellow-500 hover:bg-yellow-500/20"
      default:
        return ""
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Recent Payments</CardTitle>
        <CardDescription>You have {payments.length} payments this month.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Category</TableHead>
                <TableHead>Description</TableHead>
                <TableHead className="text-right">Amount</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {payments.map((payment) => (
                <TableRow key={payment.id}>
                  <TableCell>
                    <Badge className={getCategoryColor(payment.category)} variant="secondary">
                      {payment.category}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-medium">{payment.description}</TableCell>
                  <TableCell className="text-right">
                    ${payment.amount.toFixed(2)}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                          <span className="sr-only">Open menu</span>
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuItem>View details</DropdownMenuItem>
                        <DropdownMenuItem>Download receipt</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  )
}