'use client';

import { Emoji } from '@/components/ui/Emoji';
import {
  ChevronUp,
  ChevronDown,
  ChevronsUpDown,
  Home,
  User,
  Settings,
  Search,
  Plus,
  Star,
  Heart,
  Check,
  AlertTriangle,
  Info,
} from 'lucide-react';

export function IconsSection() {
  const sampleIcons = [
    { name: 'home', component: Home },
    { name: 'user', component: User },
    { name: 'settings', component: Settings },
    { name: 'search', component: Search },
    { name: 'plus', component: Plus },
    { name: 'star', component: Star },
    { name: 'heart', component: Heart },
    { name: 'check', component: Check },
    { name: 'info', component: Info },
    { name: 'warning', component: AlertTriangle },
  ];

  const sampleEmojis = [
    '🎯',
    '✅',
    '❌',
    '⚠️',
    '📋',
    '📊',
    '🔧',
    '⚙️',
    '🚀',
    '💡',
    '🔥',
    '⭐',
    '🎉',
    '👥',
    '📝',
    '🔍',
    '📅',
    '⏰',
    '💻',
    '📱',
    '🎨',
    '🔒',
    '🔓',
    '📈',
    '📉',
    '💰',
    '🏆',
    '🎪',
    '🌈',
    '🌟',
  ];

  return (
    <section id="icons" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Icons & Emojis
      </h2>

      <div className="space-y-8">
        {/* Lucide Icons */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Lucide Icons
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Icônes avec différentes tailles
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <Home size={16} />
                <User size={20} />
                <Settings size={24} />
                <Search size={28} />
                <Plus size={32} />
                <Star size={36} />
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Icônes avec différentes couleurs
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <Heart className="text-[var(--destructive)]" />
                <Star className="text-[var(--accent)]" />
                <Check className="text-[var(--success)]" />
                <AlertTriangle className="text-[var(--yellow)]" />
                <Info className="text-[var(--primary)]" />
                <Settings className="text-[var(--purple)]" />
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Collection d&apos;icônes disponibles
              </p>
              <div className="grid grid-cols-5 gap-3 p-4 bg-[var(--card)] rounded-lg border border-[var(--border)]">
                {sampleIcons.map((icon) => (
                  <div
                    key={icon.name}
                    className="flex flex-col items-center space-y-1"
                  >
                    <icon.component size={20} />
                    <span className="text-xs text-[var(--muted-foreground)] text-center">
                      {icon.name}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                États interactifs
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <button className="p-2 hover:bg-[var(--card-hover)] rounded-md transition-colors">
                  <Heart className="text-[var(--muted-foreground)] hover:text-[var(--destructive)] transition-colors" />
                </button>
                <button className="p-2 hover:bg-[var(--card-hover)] rounded-md transition-colors">
                  <Star className="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors" />
                </button>
                <button className="p-2 hover:bg-[var(--card-hover)] rounded-md transition-colors">
                  <Settings className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors" />
                </button>
                <button className="p-2 hover:bg-[var(--card-hover)] rounded-md transition-colors">
                  <Check className="text-[var(--muted-foreground)] hover:text-[var(--success)] transition-colors" />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Emojis */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Emojis
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Emojis avec différentes tailles
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <Emoji emoji="🎯" className="text-sm" />
                <Emoji emoji="✅" className="text-base" />
                <Emoji emoji="🚀" className="text-lg" />
                <Emoji emoji="💡" className="text-xl" />
                <Emoji emoji="🔥" className="text-2xl" />
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Collection d&apos;emojis disponibles
              </p>
              <div className="grid grid-cols-10 gap-3 p-4 bg-[var(--card)] rounded-lg border border-[var(--border)]">
                {sampleEmojis.map((emoji) => (
                  <div key={emoji} className="flex justify-center">
                    <Emoji emoji={emoji} className="text-lg" />
                  </div>
                ))}
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Utilisation dans différents contextes
              </p>
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
                  <Emoji emoji="📋" className="text-lg" />
                  <div>
                    <div className="font-medium text-[var(--foreground)]">
                      Tâche importante
                    </div>
                    <div className="text-sm text-[var(--muted-foreground)]">
                      Due dans 2 jours
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
                  <Emoji emoji="🎉" className="text-lg" />
                  <div>
                    <div className="font-medium text-[var(--foreground)]">
                      Projet terminé
                    </div>
                    <div className="text-sm text-[var(--muted-foreground)]">
                      Félicitations !
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
                  <Emoji emoji="⚠️" className="text-lg" />
                  <div>
                    <div className="font-medium text-[var(--foreground)]">
                      Attention requise
                    </div>
                    <div className="text-sm text-[var(--muted-foreground)]">
                      Action nécessaire
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Sort Icons */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Sort Icons
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                États de tri
              </p>
              <div className="flex flex-wrap items-center gap-4">
                <div className="flex items-center gap-2">
                  <ChevronsUpDown size={16} />
                  <span className="text-sm text-[var(--muted-foreground)]">
                    Aucun tri
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <ChevronUp size={16} />
                  <span className="text-sm text-[var(--muted-foreground)]">
                    Tri croissant
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <ChevronDown size={16} />
                  <span className="text-sm text-[var(--muted-foreground)]">
                    Tri décroissant
                  </span>
                </div>
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Utilisation dans les en-têtes de tableau
              </p>
              <div className="bg-[var(--card)] rounded-lg border border-[var(--border)] overflow-hidden">
                <div className="grid grid-cols-3 gap-4 p-4 bg-[var(--card-column)] border-b border-[var(--border)]">
                  <div className="flex items-center gap-2 cursor-pointer hover:bg-[var(--card-hover)] p-2 rounded-md transition-colors">
                    <span className="text-sm font-medium text-[var(--foreground)]">
                      Nom
                    </span>
                    <ChevronUp size={14} />
                  </div>
                  <div className="flex items-center gap-2 cursor-pointer hover:bg-[var(--card-hover)] p-2 rounded-md transition-colors">
                    <span className="text-sm font-medium text-[var(--foreground)]">
                      Date
                    </span>
                    <ChevronDown size={14} />
                  </div>
                  <div className="flex items-center gap-2 cursor-pointer hover:bg-[var(--card-hover)] p-2 rounded-md transition-colors">
                    <span className="text-sm font-medium text-[var(--foreground)]">
                      Priorité
                    </span>
                    <ChevronsUpDown size={14} />
                  </div>
                </div>
                <div className="p-4 space-y-2">
                  <div className="text-sm text-[var(--foreground)]">
                    Alice Johnson
                  </div>
                  <div className="text-sm text-[var(--foreground)]">
                    Bob Smith
                  </div>
                  <div className="text-sm text-[var(--foreground)]">
                    Charlie Brown
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
