import {
  AlignLeftIcon,
  FileTextIcon,
  SearchIcon,
  UsersIcon,
} from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card';

type PostStatsCardsProps = {
  total: number;
  filtered: number;
  authorCount: number;
  avgLength: number;
};

export const PostStatsCards = ({
  total,
  filtered,
  authorCount,
  avgLength,
}: PostStatsCardsProps) => {
  const items = [
    {
      label: '전체 글',
      value: `${total.toLocaleString()}건`,
      Icon: FileTextIcon,
    },
    {
      label: '검색 결과',
      value: `${filtered.toLocaleString()}건`,
      Icon: SearchIcon,
    },
    {
      label: '작성자 수',
      value: `${authorCount.toLocaleString()}명`,
      Icon: UsersIcon,
    },
    {
      label: '평균 본문 길이',
      value: `${avgLength.toLocaleString()}자`,
      Icon: AlignLeftIcon,
    },
  ];

  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {items.map(({ label, value, Icon }) => (
        <Card key={label} className="gap-2 py-5">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {label}
            </CardTitle>
            <Icon aria-hidden className="size-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold tabular-nums">{value}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};