AI Analytics Card

"use client";

import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
} from "@/components/ui/card";
import { ArrowUp, ArrowDown } from "lucide-react";
import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart";
import {
    BarChart,
    Bar,
    XAxis,
    CartesianGrid,
    ResponsiveContainer,
} from "recharts";

interface AIAnalyticsCard01Props {
    title?: string;
    description?: string;
    metric?: number | string;
    change?: number;
    data?: { label: string; value: number }[];
}

export default function AIAnalyticsCard01({
    title = "Model Calls",
    description = "Last 7 days usage",
    metric = "1.2K",
    change = 14.2,
    data = [
        { label: "Mon", value: 12 },
        { label: "Tue", value: 19 },
        { label: "Wed", value: 27 },
        { label: "Thu", value: 23 },
        { label: "Fri", value: 30 },
        { label: "Sat", value: 24 },
        { label: "Sun", value: 32 },
    ],
}: AIAnalyticsCard01Props) {
    const isPositive = change >= 0;

    return (
        <Card className="border-0 p-4 pb-0 w-full">
            <CardHeader className="p-0">
                <CardTitle className="text-sm">{title}</CardTitle>
                <CardDescription className="text-xs text-muted-foreground">
                    {description}
                </CardDescription>
            </CardHeader>

            <CardContent className="p-0 flex flex-col gap-2">
                <div className="flex items-center justify-between">
                    <span className="text-2xl font-bold">{metric}</span>
                    <div
                        className={
                            isPositive
                                ? "flex items-center text-green-600 text-sm font-medium"
                                : "flex items-center text-red-600 text-sm font-medium"
                        }
                    >
                        {isPositive ? (
                            <ArrowUp className="w-4 h-4 mr-1" />
                        ) : (
                            <ArrowDown className="w-4 h-4 mr-1" />
                        )}
                        {Math.abs(change)}%
                    </div>
                </div>

                {/* ShadCN Chart using Recharts */}
                <div className="h-[240px] mt-6 w-full">
                    <ChartContainer
                        config={{
                            value: { label: "Usage", color: "var(--color-chart-1)" },
                        }}
                        className="h-full w-full"
                    >
                        <ResponsiveContainer>
                            <BarChart data={data}>
                                <CartesianGrid vertical={false} />
                                <XAxis
                                    dataKey="label"
                                    tickLine={false}
                                    axisLine={false}
                                />
                                <ChartTooltip content={<ChartTooltipContent />} />
                                <Bar dataKey="value" fill="var(--color-chart-1)" radius={12} />
                            </BarChart>
                        </ResponsiveContainer>
                    </ChartContainer>
                </div>
            </CardContent>
        </Card>
    );
}