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

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

  const categories = [
    {
      id: 'furry',
      name: 'Furry',
      icon: Image,
      color: 'var(--tag-furry)',
      path: '/media/furry'
    },
    {
      id: 'anime',
      name: 'Anime',
      icon: Palette,
      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>
  )
}