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 3 L8 8 L4 6 L6 11 L2 13 L5 15 L3 19 C3 19 7 21 12 21 C17 21 21 19 21 19 L19 15 L22 13 L18 11 L20 6 L16 8 Z" />
    <circle cx="9" cy="13" r="1" fill="currentColor" />
    <circle cx="15" cy="13" r="1" fill="currentColor" />
    <path d="M9 16 C10 17 11 17.5 12 17.5 C13 17.5 14 17 15 16" />
  </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>
  )
}