'use client';

import { Tag } from '@/lib/types';

interface TagsStatsProps {
  tags: (Tag & { usage?: number })[];
}

export function TagsStats({ tags }: TagsStatsProps) {
  const totalUsage = tags.reduce((sum, tag) => sum + (tag.usage || 0), 0);
  const activeTags = tags.filter((tag) => tag.usage && tag.usage > 0).length;

  return (
    <div className="grid grid-cols-3 gap-4 mb-4">
      <div className="text-center p-3 bg-[var(--muted)]/20 rounded">
        <div className="text-xl font-bold text-[var(--foreground)]">
          {tags.length}
        </div>
        <div className="text-sm text-[var(--muted-foreground)]">Tags créés</div>
      </div>
      <div className="text-center p-3 bg-[var(--primary)]/10 rounded">
        <div className="text-xl font-bold text-[var(--primary)]">
          {totalUsage}
        </div>
        <div className="text-sm text-[var(--muted-foreground)]">
          Utilisations
        </div>
      </div>
      <div className="text-center p-3 bg-[var(--success)]/10 rounded">
        <div className="text-xl font-bold text-[var(--success)]">
          {activeTags}
        </div>
        <div className="text-sm text-[var(--muted-foreground)]">Actifs</div>
      </div>
    </div>
  );
}
