import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  SubscriptionStatusBadge,
  formatDate,
  formatDateRange,
} from '@crafted/ui';

interface SubscriptionHistoryTableProps {
  subscriptions: Array<{
    id: string;
    status: string;
    currentPeriodStart: Date;
    currentPeriodEnd: Date;
    createdAt: Date;
  }>;
}

export function SubscriptionHistoryTable({ subscriptions }: SubscriptionHistoryTableProps) {
  return (
    <Card className="mt-8">
      <CardHeader>
        <CardTitle>Subscription History</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b">
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">
                  Status
                </th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">
                  Period
                </th>
                <th className="pb-3 text-left text-sm font-medium text-muted-foreground">
                  Created
                </th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {subscriptions.map((sub) => (
                <tr key={sub.id}>
                  <td className="py-3">
                    <SubscriptionStatusBadge status={sub.status} />
                  </td>
                  <td className="py-3 text-sm">
                    {formatDateRange(sub.currentPeriodStart, sub.currentPeriodEnd)}
                  </td>
                  <td className="py-3 text-sm">
                    {formatDate(sub.createdAt)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  );
}
