import type { LucideIcon } from 'lucide-react';

import {
  percentageBackgroundClass,
  percentageBorderClass,
  percentageTextClass,
} from '@/components/campus-attendance/styles';

type AttendanceSummaryCardProps = {
  label: string;
  value: string | number;
  helper: string;
  icon: LucideIcon;
  color?: 'percentage' | 'blue' | 'violet' | 'red';
  percentage?: number | null;
};

export function AttendanceSummaryCard({
  label,
  value,
  helper,
  icon: Icon,
  color = 'percentage',
  percentage = null,
}: AttendanceSummaryCardProps) {
  const fixedColorClasses = {
    blue: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
    violet: 'bg-violet-500/10 border-violet-500/20 text-violet-400',
    red: 'bg-red-500/10 border-red-500/20 text-red-400',
  };
  const cardClass = color === 'percentage'
    ? `${percentageBackgroundClass(percentage)} ${percentageBorderClass(percentage)} ${percentageTextClass(percentage)}`
    : fixedColorClasses[color];

  return (
    <div className={`rounded-2xl border p-5 ${cardClass}`}>
      <div className="flex items-center gap-2 mb-2">
        <Icon size={16} className={color === 'percentage' ? 'text-slate-400' : undefined} />
        <span className="text-xs text-slate-400 font-medium">{label}</span>
      </div>
      <p className={`text-3xl font-bold ${color === 'percentage' ? percentageTextClass(percentage) : ''}`}>
        {value}
      </p>
      <p className="text-[10px] text-slate-500 mt-1">{helper}</p>
    </div>
  );
}
