import { Info } from 'lucide-react';
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
export type MetricCardProps = {
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
title: string;
value: React.ReactNode;
description: string;
subtitle?: string;
iconColor: string;
};
export const MetricCard = ({
icon: Icon,
title,
value,
description,
subtitle,
iconColor,
}: MetricCardProps) => {
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<div className="flex items-center space-x-2">
<CardTitle className="text-md font-medium">{title}</CardTitle>
<Tooltip>
<TooltipTrigger asChild>
<Info className="h-4 w-4 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">{description}</TooltipContent>
</Tooltip>
</div>
<Icon className={`h-5 w-5 ${iconColor}`} />
</CardHeader>
<CardContent>
<div className="text-xl font-bold">{value}</div>
{subtitle && (
<div className="text-sm text-muted-foreground mt-2">{subtitle}</div>
)}
</CardContent>
</Card>
);
};
export const MetricCardSkeleton = () => {
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<div className="flex items-center space-x-2">
<Skeleton className="h-6 w-24" />
<Skeleton className="h-4 w-4 rounded-full" />
</div>
<Skeleton className="h-5 w-5" />
</CardHeader>
<CardContent>
<Skeleton className="h-8 w-20 mb-2" />
<Skeleton className="h-4 w-32" />
</CardContent>
</Card>
);
};
