import { useNavigate } from 'react-router-dom'
import { Music, User } from 'lucide-react'
import { hapticFeedback } from '../utils/telegram'
import './Media.css'

// Иконка лисы из Icons8
const FoxIcon = ({ size = 48 }) => (
  <img 
    src="https://img.icons8.com/windows/32/fox.png" 
    alt="Fox" 
    width={size} 
    height={size}
    style={{ objectFit: 'contain' }}
  />
)

export default function Media({ user }) {
  const navigate = useNavigate()

  const categories = [
    {
      id: 'furry',
      name: 'Furry',
      icon: FoxIcon,
      color: 'var(--tag-furry)',
      path: '/media/furry'
    },
    {
      id: 'anime',
      name: 'Anime',
      icon: User,
      color: 'var(--tag-anime)',
      path: '/media/anime'
    },
    {
      id: 'music',
      name: 'Music',
      icon: Music,
      color: '#9b59b6',
      path: '/media/music'
    }
  ]

  const handleCategoryClick = (category) => {
    hapticFeedback('light')
    navigate(category.path)
  }

  return (
    <div className="media-page">
      <div className="media-header">
        <h1>Media</h1>
      </div>

      <div className="media-grid">
        {categories.map((category) => {
          const Icon = category.icon
          return (
            <button
              key={category.id}
              className="media-card"
              onClick={() => handleCategoryClick(category)}
              style={{ '--category-color': category.color }}
            >
              <div className="media-card-icon">
                {category.id === 'furry' ? (
                  <Icon size={48} />
                ) : (
                  <Icon size={48} strokeWidth={2} />
                )}
              </div>
              <h2 className="media-card-title">{category.name}</h2>
            </button>
          )
        })}
      </div>
    </div>
  )
}