'use client';

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

interface ThreeDIconProps {
  icon: LucideIcon;
  color?: string;
  bgColor?: string;
  size?: 'sm' | 'md' | 'lg';
}

const sizes = {
  sm: { container: 'w-10 h-10', icon: 'w-5 h-5' },
  md: { container: 'w-14 h-14', icon: 'w-7 h-7' },
  lg: { container: 'w-18 h-18', icon: 'w-9 h-9' },
};

export function ThreeDIcon({ icon: Icon, color = 'text-[var(--gold)]', bgColor, size = 'md' }: ThreeDIconProps) {
  const s = sizes[size];
  return (
    <motion.div
      whileHover={{ rotateX: -10, rotateY: 10, scale: 1.1 }}
      style={{ perspective: '600px', transformStyle: 'preserve-3d' }}
      className="shrink-0"
    >
      <div className={`${s.container} rounded-2xl ${bgColor || 'bg-gradient-to-br from-[var(--navy)]/[0.06] to-[var(--navy)]/[0.02]'} flex items-center justify-center shadow-[var(--shadow-sm)] border border-[var(--navy)]/[0.04]`}>
        <Icon className={`${s.icon} ${color}`} />
      </div>
    </motion.div>
  );
}