'use client'

import { motion } from 'framer-motion'
import { Cloud } from 'lucide-react'

interface ProductShowcaseProps {
  type: 'mini' | 'studio' | 'cloud'
  className?: string
}

const PRODUCT_IMAGES = {
  mini: 'https://www.apple.com/newsroom/images/2024/10/apples-new-mac-mini-apples-new-mac-mini-is-more-mighty-more-mini-and-built-for-apple-intelligence/article/Apple-Mac-mini-hero_big.jpg.large.jpg',
  studio: 'https://www.apple.com/newsroom/images/2025/03/apple-unveils-new-mac-studio-the-most-powerful-mac-ever/article/Apple-Mac-Studio-front-250305_big.jpg.large.jpg',
}

export default function ProductShowcase({ type, className = '' }: ProductShowcaseProps) {
  if (type === 'cloud') {
    return (
      <motion.div
        className={`relative ${className}`}
        whileHover={{ rotateY: 5, rotateX: -5, scale: 1.05 }}
        transition={{ type: 'spring', stiffness: 300 }}
        style={{ perspective: 1000, transformStyle: 'preserve-3d' }}
      >
        <div className="w-28 h-28 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500
          flex items-center justify-center shadow-lg shadow-purple-500/20">
          <Cloud className="w-14 h-14 text-white" />
        </div>
      </motion.div>
    )
  }

  return (
    <motion.div
      className={`relative ${className}`}
      whileHover={{ rotateY: 5, rotateX: -5, scale: 1.05 }}
      transition={{ type: 'spring', stiffness: 300 }}
      style={{ perspective: 1000, transformStyle: 'preserve-3d' }}
    >
      <div className="w-28 h-28 rounded-2xl overflow-hidden shadow-lg shadow-indigo-500/20 bg-white/5">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={PRODUCT_IMAGES[type]}
          alt={type === 'mini' ? 'Mac Mini M4 Pro' : 'Mac Studio M3 Ultra'}
          className="w-full h-full object-cover"
        />
      </div>
    </motion.div>
  )
}