import { motion } from 'framer-motion';
import { Card } from '@/components/ui/Card';
import { useCountUp } from '@/hooks/useCountUp';
import { Tooltip } from '@/components/ui/Tooltip';

interface MatchCountChartProps {
  total: number;
  thisWeek?: number;
  dailyCounts?: number[];
}

export function MatchCountChart({ total, thisWeek = 0, dailyCounts }: MatchCountChartProps) {
  const animatedTotal = useCountUp(total);
  const bars = dailyCounts || [3, 5, 2, 7, 4, 6, 1];
  const maxBar = Math.max(...bars, 1);

  return (
    <Card>
      <p className="text-xs text-text-muted uppercase tracking-wider font-medium mb-1">Matches</p>
      <p className="text-3xl font-mono font-bold text-text-primary">{animatedTotal}</p>
      <p className="text-sm text-text-secondary mt-0.5">{thisWeek} this week</p>

      <div className="flex items-end gap-1.5 mt-3 h-10">
        {bars.map((count, i) => (
          <Tooltip key={i} content={`${count} matches`} position="top">
            <motion.div
              className="flex-1 bg-accent-secondary/50 rounded-t-sm min-h-[2px] cursor-pointer hover:bg-accent-secondary/80 transition-colors"
              initial={{ height: 0 }}
              animate={{ height: `${(count / maxBar) * 100}%` }}
              transition={{ duration: 0.6, delay: i * 0.05, ease: 'easeOut' }}
            />
          </Tooltip>
        ))}
      </div>
    </Card>
  );
}
