import React from 'react';
import { usePage } from '@inertiajs/react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { format } from 'date-fns';

interface Purchase {
  id: number;
  created_at: string;
  package: {
    name: string;
    price: number;
  };
  status: string;
}

const ProfileOrders = () => {
  const { purchases } = usePage().props as any;

  return (
    <div className="container mx-auto py-8">
      <Card>
        <CardHeader>
          <CardTitle>Bestellungen</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Paket</TableHead>
                <TableHead>Preis</TableHead>
                <TableHead>Datum</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {purchases.map((purchase) => (
                <TableRow key={purchase.id}>
                  <TableCell>{purchase.package.name}</TableCell>
                  <TableCell>{purchase.package.price} €</TableCell>
                  <TableCell>{format(new Date(purchase.created_at), 'dd.MM.yyyy')}</TableCell>
                  <TableCell>
                    <Badge variant={purchase.status === 'completed' ? 'default' : 'secondary'}>
                      {purchase.status}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {purchases.length === 0 && (
            <p className="text-center text-muted-foreground py-8">Keine Bestellungen gefunden.</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

export default ProfileOrders;