import {
  Award,
  BarChart,
  Bell,
  CheckCircle,
  ChevronRight,
  Cloud,
  Code,
  Cpu,
  Database,
  Gift,
  Globe,
  Heart,
  Lock,
  Mail,
  Map,
  Monitor,
  Phone,
  Search,
  Settings,
  Shield,
  Star,
  TrendingUp,
  Users,
  Wallet,
  Zap,
  type LucideIcon,
} from 'lucide-react';

const ICONS: Record<string, LucideIcon> = {
  Star,
  Zap,
  Shield,
  Cpu,
  Globe,
  Heart,
  TrendingUp,
  Lock,
  Bell,
  Cloud,
  Code,
  Database,
  Gift,
  Mail,
  Map,
  Monitor,
  Phone,
  Search,
  Settings,
  Users,
  Wallet,
  CheckCircle,
  ChevronRight,
  BarChart,
  Award,
};

export type CardMode = 'flat' | 'card';

export type CardProps = {
  title: string;
  description: string;
  icon: string;
  mode: CardMode;
  iconColor: string;
  padding: string;
};

export default function CardSection({
  title,
  description,
  icon,
  mode,
  iconColor,
  padding,
}: CardProps) {
  const Icon = ICONS[icon] ?? Star;

  const isCard = mode === 'card';

  return (
    <div style={{ padding }} className="h-full">
      <div
        className={`flex h-full flex-col gap-4 rounded-xl p-6 ${
          isCard ? 'border border-border bg-card shadow-sm' : 'bg-transparent'
        }`}
      >
        <div
          className="flex h-12 w-12 items-center justify-center rounded-lg"
          style={{ color: iconColor, backgroundColor: `${iconColor}20` }}
        >
          <Icon size={24} />
        </div>
        <div>
          <h3 className="mb-2 text-lg font-semibold text-foreground">
            {title}
          </h3>
          <p className="text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>
      </div>
    </div>
  );
}

export { ICONS };