import { ArrowDownLeft, ArrowUpRight, Minus } from "lucide-react";

import type { StatMetric } from "@/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const trendStyles = {
  up: "text-emerald-300",
  down: "text-rose-300",
  neutral: "text-amber-200",
} as const;

export function StatCard({ metric }: { metric: StatMetric }) {
  const Icon = metric.trend === "up" ? ArrowUpRight : metric.trend === "down" ? ArrowDownLeft : Minus;

  return (
    <Card className="ornament-grid">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold text-muted-foreground">{metric.label}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold text-foreground">{metric.value}</div>
        <p className={cn("mt-1 flex items-center gap-1 text-xs", trendStyles[metric.trend])}>
          <Icon className="h-3.5 w-3.5" />
          {metric.delta}
        </p>
        {metric.note ? <p className="mt-2 text-xs text-muted-foreground">{metric.note}</p> : null}
      </CardContent>
    </Card>
  );
}