"use client";

import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

function ChartAreaSkeleton() {
  return (
    <div className="flex h-full flex-col justify-end gap-2 pt-4">
      <div className="flex h-full items-end gap-1">
        {[40, 65, 50, 80, 55, 70, 45].map((h, i) => (
          <Skeleton key={i} className="flex-1 rounded-t-md" style={{ height: `${h}%` }} />
        ))}
      </div>
      <Skeleton className="h-3 w-full" />
    </div>
  );
}

function ChartPieSkeleton() {
  return (
    <div className="flex h-full items-center justify-center">
      <Skeleton className="h-40 w-40 rounded-full" />
    </div>
  );
}

export function ReportsChartsFallback() {
  const t = useTranslations("reports");
  return (
    <>
      <div className="grid gap-4 lg:grid-cols-3">
        <Card className="rounded-xl border border-border/80 bg-card lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">{t("revenueChartTitle")}</CardTitle>
          </CardHeader>
          <CardContent className="h-72">
            <ChartAreaSkeleton />
          </CardContent>
        </Card>
        <Card className="rounded-xl border border-border/80 bg-card">
          <CardHeader>
            <CardTitle className="text-base">{t("paymentMixTitle")}</CardTitle>
          </CardHeader>
          <CardContent className="h-72">
            <ChartPieSkeleton />
          </CardContent>
        </Card>
      </div>
    </>
  );
}
