Upcoming Charges

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/card";
11import { cn } from "@/lib/utils";
12import { Calendar } from "lucide-react";
13 
14export interface ChargeItem {
15  id: string;
16  description: string;
17  amount: string;
18  date: string;
19  type: "prorated" | "recurring" | "one-time";
20}
21 
22export interface UpcomingChargesProps {
23  className?: string;
24  title?: string;
25  description?: string;
26  nextBillingDate: string;
27  totalAmount: string;
28  charges: ChargeItem[];
29}
30 
31export function UpcomingCharges({
32  className,
33  title = "Upcoming Charges",
34  description,
35  nextBillingDate,
36  totalAmount,
37  charges,
38}: UpcomingChargesProps) {
39  const getChargeTypeBadge = (type: ChargeItem["type"]) => {
40    switch (type) {
41      case "prorated":
42        return <Badge variant="secondary">Prorated</Badge>;
43      case "recurring":
44        return <Badge variant="default">Recurring</Badge>;
45      case "one-time":
46        return <Badge variant="outline">One-time</Badge>;
47      default:
48        return <Badge variant="outline">Unknown</Badge>;
49    }
50  };
51 
52  return (
53    <Card className={cn("mx-auto w-full max-w-2xl", className)}>
54      <CardHeader>
55        <CardTitle>{title}</CardTitle>
56        {description && <CardDescription>{description}</CardDescription>}
57      </CardHeader>
58      <CardContent className="space-y-6">
59        <div className="bg-muted/30 rounded-lg border p-4">
60          <div className="flex items-center justify-between gap-4">
61            <div className="flex items-center gap-3">
62              <Calendar className="text-muted-foreground h-5 w-5" />
63              <div>
64                <p className="text-muted-foreground text-sm">
65                  Next Billing Date
66                </p>
67                <p className="font-semibold">{nextBillingDate}</p>
68              </div>
69            </div>
70            <div className="text-right">
71              <p className="text-muted-foreground text-sm">Total</p>
72              <p className="text-2xl font-bold tabular-nums">{totalAmount}</p>
73            </div>
74          </div>
75        </div>
76 
77        <div className="space-y-3">
78          <h3 className="text-sm font-semibold">Breakdown</h3>
79          <div className="space-y-2">
80            {charges.map((charge) => (
81              <div
82                key={charge.id}
83                className="hover:bg-muted/50 rounded-lg border p-3 transition-colors"
84              >
85// … truncated