app/components/DesktopIcon.tsx

'use client'

import React from 'react'
import { House, Trash, Calendar as CalendarIcon, Clock, Folder, Globe, Sparkle, GameController } from '@phosphor-icons/react'

interface DesktopIconProps {
  icon: 'home' | 'trash' | 'calendar' | 'clock' | 'game' | 'folder' | 'browser' | 'gemini'
  label: string
  onClick: () => void
}

export function DesktopIcon({ icon, label, onClick }: DesktopIconProps) {
  const getIcon = () => {
    switch(icon) {
      case 'home': return House
      case 'calendar': return CalendarIcon
      case 'clock': return Clock
      case 'game': return GameController
      case 'folder': return Folder
      case 'browser': return Globe
      case 'gemini': return Sparkle
      case 'trash': return Trash
      default: return Folder
    }
  }

  const Icon = getIcon()

  const getGradient = () => {
    if (icon === 'calendar') {
      return 'from-purple-500/80 to-purple-700/80 group-hover:from-purple-400/80 group-hover:to-purple-600/80'
    }
    if (icon === 'clock') {
      return 'from-teal-500/80 to-cyan-600/80 group-hover:from-teal-400/80 group-hover:to-cyan-500/80'
    }
    if (icon === 'game') {
      return 'from-pink-500/80 to-rose-600/80 group-hover:from-pink-400/80 group-hover:to-rose-500/80'
    }
    if (icon === 'folder') {
      return 'from-orange-500/80 to-orange-700/80 group-hover:from-orange-400/80 group-hover:to-orange-600/80'
    }
    if (icon === 'browser') {
      return 'from-blue-500/80 to-cyan-600/80 group-hover:from-blue-400/80 group-hover:to-cyan-500/80'
    }
    if (icon === 'gemini') {
      return 'from-[#E95420]/80 to-[#d14818]/80 group-hover:from-[#E95420] group-hover:to-[#d14818]'
    }
    return 'from-gray-600/80 to-gray-700/80 group-hover:from-gray-500/80 group-hover:to-gray-600/80'
  }

  return (
    <button
      onClick={onClick}
      className="flex flex-col items-center gap-1 p-2 rounded hover:bg-white/10 transition-colors w-24 group mb-2"
    >
      <div className={`w-16 h-16 rounded-lg bg-gradient-to-br ${getGradient()} backdrop-blur-sm flex items-center justify-center transition-all`}>
        <Icon size={32} weight="regular" className="text-white" />
      </div>
      <span className="text-white text-xs text-center drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] font-medium">
        {label}
      </span>
    </button>
  )
}