nakama/frontend/src/pages/Media.jsx

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

// Иконка лисы (SVG в стиле аниме)
const FoxIcon = ({ size = 48 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    {/* Голова */}
    <path d="M12 8C15 8 17 10 17 12.5C17 13.5 16.5 14.5 16 15" />
    <path d="M12 8C9 8 7 10 7 12.5C7 13.5 7.5 14.5 8 15" />
    
    {/* Уши */}
    <path d="M10 6L9 3L8 6" />
    <path d="M14 6L15 3L16 6" />
    
    {/* Мордочка */}
    <ellipse cx="12" cy="13" rx="4.5" ry="3.5" />
    
    {/* Глаза */}
    <circle cx="10" cy="12.5" r="1.2" fill="currentColor" />
    <circle cx="14" cy="12.5" r="1.2" fill="currentColor" />
    
    {/* Нос */}
    <path d="M12 14.5L11.5 15.5L12 16.5L12.5 15.5Z" fill="currentColor" />
    
    {/* Рот */}
    <path d="M10.5 15C11 16 11.5 16.5 12 16.5C12.5 16.5 13 16 13.5 15" />
    
    {/* Туловище */}
    <ellipse cx="12" cy="18.5" rx="3.5" ry="2.5" />
    
    {/* Хвост */}
    <path d="M15.5 17C17.5 16.5 19 18 19.5 20C20 22 19 23.5 17.5 24" />
  </svg>
)

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">
                <Icon size={48} strokeWidth={2} />
              </div>
              <h2 className="media-card-title">{category.name}</h2>
            </button>
          )
        })}
      </div>
    </div>
  )
}