'use client';

import { motion } from 'framer-motion';

interface AgeingBucket {
  label: string;
  range: string;
  count: number;
  color: string;
  textColor: string;
}

export default function AgeingCard({ data }: { data: AgeingBucket[] }) {
  const total = data.reduce((s, b) => s + b.count, 0);

  return (
    <div className="grid grid-cols-4 gap-2">
      {data.map((bucket, i) => (
        <motion.div
          key={bucket.range}
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: i * 0.08 }}
          className={`${bucket.color} rounded-none p-3 text-center`}
        >
          <p className={`text-xl font-bold ${bucket.textColor}`}>{bucket.count}</p>
          <p className={`text-[10px] font-semibold ${bucket.textColor} opacity-80 mt-0.5 leading-tight`}>{bucket.range}</p>
          <p className={`text-[9px] ${bucket.textColor} opacity-60 mt-1`}>
            {total > 0 ? Math.round((bucket.count / total) * 100) : 0}%
          </p>
        </motion.div>
      ))}
    </div>
  );
}