OpenFlare/frontend/components/data/rank-card.tsx

'use client';

import { useTranslations } from 'next-intl';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

import { RankChart } from './rank-chart';

type RankCardItem = {
  label: string;
  value: number;
};

type RankCardProps = {
  title: string;
  description: string;
  items: RankCardItem[];
  color?: string;
  valueFormatter?: (value: number) => string;
};

export function RankCard({
  title,
  description,
  items,
  color = '#3b82f6',
  valueFormatter,
}: RankCardProps) {
  const t = useTranslations('dataComponents');
  return (
    <Card className='border-dashed shadow-none'>
      <CardHeader className='pb-3'>
        <CardTitle className='text-sm font-semibold text-foreground'>
          {title}
        </CardTitle>
        <CardDescription className='text-xs text-muted-foreground'>
          {description}
        </CardDescription>
      </CardHeader>
      <CardContent className='pt-0'>
        <RankChart
          items={items}
          color={color}
          valueFormatter={valueFormatter}
          emptyMessage={t('noDataForTitle', { title })}
        />
      </CardContent>
    </Card>
  );
}