got-gaming/app/style-guide/page.tsx

"use client";

import { useState } from "react";
import Navigation from "@/components/navigation/Navigation";
import {
  Button,
  Input,
  Textarea,
  Card,
  Badge,
  Alert,
  Modal,
  ProgressBar,
  StarRating,
  Avatar,
  SectionTitle,
  BackgroundSection,
  CloseButton,
} from "@/components/ui";

export default function StyleGuidePage() {
  const [modalOpen, setModalOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [textareaValue, setTextareaValue] = useState("");
  const [rating, setRating] = useState(0);

  return (
    <main className="min-h-screen bg-black relative">
      <Navigation />
      <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24 pb-16">
        <div className="w-full max-w-6xl mx-auto px-8">
          <SectionTitle variant="gradient" size="xl" className="mb-12">
            STYLE GUIDE
          </SectionTitle>
          <p className="text-gray-400 text-center mb-12 max-w-3xl mx-auto">
            Guide de style complet avec tous les composants UI disponibles et
            leurs variantes
          </p>

          {/* Buttons */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Buttons
            </h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
                <div className="flex flex-wrap gap-4">
                  <Button variant="primary">Primary</Button>
                  <Button variant="secondary">Secondary</Button>
                  <Button variant="success">Success</Button>
                  <Button variant="danger">Danger</Button>
                  <Button variant="ghost">Ghost</Button>
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="flex flex-wrap items-center gap-4">
                  <Button variant="primary" size="sm">
                    Small
                  </Button>
                  <Button variant="primary" size="md">
                    Medium
                  </Button>
                  <Button variant="primary" size="lg">
                    Large
                  </Button>
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">États</h3>
                <div className="flex flex-wrap gap-4">
                  <Button variant="primary">Normal</Button>
                  <Button variant="primary" disabled>
                    Disabled
                  </Button>
                </div>
              </div>
            </div>
          </Card>

          {/* Inputs */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Inputs</h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Types</h3>
                <div className="space-y-4 max-w-md">
                  <Input
                    label="Text Input"
                    type="text"
                    placeholder="Entrez du texte"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                  />
                  <Input
                    label="Email Input"
                    type="email"
                    placeholder="email@example.com"
                  />
                  <Input
                    label="Password Input"
                    type="password"
                    placeholder="••••••••"
                  />
                  <Input
                    label="Number Input"
                    type="number"
                    placeholder="123"
                  />
                  <Input
                    label="Date Input"
                    type="date"
                  />
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
                <div className="max-w-md">
                  <Input
                    label="Input avec erreur"
                    type="text"
                    error="Ce champ est requis"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                  />
                </div>
              </div>
            </div>
          </Card>

          {/* Textarea */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Textarea
            </h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Basique</h3>
                <div className="max-w-md">
                  <Textarea
                    label="Commentaire"
                    placeholder="Écrivez votre commentaire..."
                    value={textareaValue}
                    onChange={(e) => setTextareaValue(e.target.value)}
                    rows={4}
                  />
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">
                  Avec compteur de caractères
                </h3>
                <div className="max-w-md">
                  <Textarea
                    label="Bio"
                    placeholder="Parlez-nous de vous..."
                    value={textareaValue}
                    onChange={(e) => setTextareaValue(e.target.value)}
                    rows={4}
                    maxLength={500}
                    showCharCount
                  />
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
                <div className="max-w-md">
                  <Textarea
                    label="Textarea avec erreur"
                    placeholder="Écrivez quelque chose..."
                    error="Ce champ est requis"
                    value={textareaValue}
                    onChange={(e) => setTextareaValue(e.target.value)}
                    rows={4}
                  />
                </div>
              </div>
            </div>
          </Card>

          {/* Badges */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Badges</h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
                <div className="flex flex-wrap gap-4">
                  <Badge variant="default">Default</Badge>
                  <Badge variant="success">Success</Badge>
                  <Badge variant="warning">Warning</Badge>
                  <Badge variant="danger">Danger</Badge>
                  <Badge variant="info">Info</Badge>
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="flex flex-wrap items-center gap-4">
                  <Badge variant="default" size="sm">
                    Small
                  </Badge>
                  <Badge variant="default" size="md">
                    Medium
                  </Badge>
                </div>
              </div>
            </div>
          </Card>

          {/* Alerts */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Alerts</h2>
            <div className="space-y-4 max-w-md">
              <Alert variant="success">
                Opération réussie ! Votre action a été effectuée avec succès.
              </Alert>
              <Alert variant="error">
                Une erreur est survenue. Veuillez réessayer.
              </Alert>
              <Alert variant="warning">
                Attention ! Cette action est irréversible.
              </Alert>
              <Alert variant="info">
                Information : Voici quelques informations utiles.
              </Alert>
            </div>
          </Card>

          {/* Cards */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Cards</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Card variant="default" className="p-4">
                <h3 className="text-lg font-bold text-pixel-gold mb-2">
                  Card Default
                </h3>
                <p className="text-gray-300 text-sm">
                  Contenu de la carte avec variant default
                </p>
              </Card>
              <Card variant="dark" className="p-4">
                <h3 className="text-lg font-bold text-pixel-gold mb-2">
                  Card Dark
                </h3>
                <p className="text-gray-300 text-sm">
                  Contenu de la carte avec variant dark
                </p>
              </Card>
            </div>
          </Card>

          {/* Progress Bars */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Progress Bars
            </h2>
            <div className="space-y-6 max-w-md">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">HP Bar (High)</h3>
                <ProgressBar
                  value={75}
                  max={100}
                  variant="hp"
                  showLabel
                  label="HP"
                />
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">HP Bar (Medium)</h3>
                <ProgressBar
                  value={45}
                  max={100}
                  variant="hp"
                  showLabel
                  label="HP"
                />
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">HP Bar (Low)</h3>
                <ProgressBar
                  value={20}
                  max={100}
                  variant="hp"
                  showLabel
                  label="HP"
                />
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">XP Bar</h3>
                <ProgressBar
                  value={60}
                  max={100}
                  variant="xp"
                  showLabel
                  label="XP"
                />
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Default</h3>
                <ProgressBar
                  value={50}
                  max={100}
                  variant="default"
                  showLabel
                  label="Progress"
                />
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Sans label</h3>
                <ProgressBar value={60} max={100} variant="default" />
              </div>
            </div>
          </Card>

          {/* Star Rating */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Star Rating
            </h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Interactif</h3>
                <StarRating
                  value={rating}
                  onChange={setRating}
                  showValue
                />
                <p className="text-gray-400 text-sm mt-2">
                  Note sélectionnée : {rating}/5
                </p>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="space-y-4">
                  <div>
                    <p className="text-gray-400 text-sm mb-2">Small</p>
                    <StarRating value={4} size="sm" />
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm mb-2">Medium</p>
                    <StarRating value={4} size="md" />
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm mb-2">Large</p>
                    <StarRating value={4} size="lg" />
                  </div>
                </div>
              </div>
            </div>
          </Card>

          {/* Avatar */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Avatar</h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="flex items-center gap-6">
                  <Avatar
                    src="/avatar-1.jpg"
                    username="User"
                    size="sm"
                  />
                  <Avatar
                    src="/avatar-2.jpg"
                    username="User"
                    size="md"
                  />
                  <Avatar
                    src="/avatar-3.jpg"
                    username="User"
                    size="lg"
                  />
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">
                  Sans image (fallback)
                </h3>
                <Avatar src={null} username="John Doe" size="lg" />
              </div>
            </div>
          </Card>

          {/* Section Title */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Section Title
            </h2>
            <div className="space-y-8">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
                <div className="space-y-4">
                  <SectionTitle variant="default" size="md">
                    Default Title
                  </SectionTitle>
                  <SectionTitle variant="gradient" size="md">
                    Gradient Title
                  </SectionTitle>
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="space-y-4">
                  <SectionTitle variant="gradient" size="sm">
                    Small Title
                  </SectionTitle>
                  <SectionTitle variant="gradient" size="md">
                    Medium Title
                  </SectionTitle>
                  <SectionTitle variant="gradient" size="lg">
                    Large Title
                  </SectionTitle>
                  <SectionTitle variant="gradient" size="xl">
                    Extra Large Title
                  </SectionTitle>
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Avec sous-titre</h3>
                <SectionTitle
                  variant="gradient"
                  size="lg"
                  subtitle="Un sous-titre descriptif"
                >
                  Title with Subtitle
                </SectionTitle>
              </div>
            </div>
          </Card>

          {/* Modal */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">Modal</h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="flex flex-wrap gap-4">
                  <Button onClick={() => setModalOpen(true)}>
                    Ouvrir Modal
                  </Button>
                </div>
              </div>
            </div>
          </Card>

          {/* Close Button */}
          <Card variant="dark" className="p-6 mb-8">
            <h2 className="text-2xl font-bold text-pixel-gold mb-6">
              Close Button
            </h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
                <div className="flex items-center gap-6">
                  <CloseButton onClick={() => {}} size="sm" />
                  <CloseButton onClick={() => {}} size="md" />
                  <CloseButton onClick={() => {}} size="lg" />
                </div>
              </div>
              <div>
                <h3 className="text-lg text-gray-300 mb-3">Disabled</h3>
                <CloseButton onClick={() => {}} disabled />
              </div>
            </div>
          </Card>

          {/* Modal Demo */}
          <Modal
            isOpen={modalOpen}
            onClose={() => setModalOpen(false)}
            size="md"
          >
            <div className="p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-bold text-pixel-gold">
                  Exemple de Modal
                </h2>
                <CloseButton onClick={() => setModalOpen(false)} />
              </div>
              <p className="text-gray-300 mb-6">
                Ceci est un exemple de modal avec différentes tailles
                disponibles.
              </p>
              <div className="flex gap-4">
                <Button onClick={() => setModalOpen(false)}>Fermer</Button>
              </div>
            </div>
          </Modal>
        </div>
      </BackgroundSection>
    </main>
  );
}