"use client";

import { Landmark } from "lucide-react";

import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { Spinner } from "@/components/ui/spinner";

export function CashBalanceLoadingState({ label }: { label: string }) {
  return (
    <div className="flex min-h-[12rem] flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border/60 bg-muted/20 px-6 py-10">
      <Spinner className="size-6 text-muted-foreground" />
      <p className="text-muted-foreground text-sm">{label}</p>
    </div>
  );
}

export function CashBalanceEmptyState({ title, description }: { title: string; description: string }) {
  return (
    <Empty className="min-h-[12rem] border-border/60 bg-muted/10">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Landmark className="size-4" />
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        <EmptyDescription>{description}</EmptyDescription>
      </EmptyHeader>
    </Empty>
  );
}