/**
 * EN: Buttons Section - All button variants
 * VI: Buttons Section - Tất cả button variants
 */
import SectionWrapper from '@/features/mood-board/components/SectionWrapper';
import ComponentShowcase from '@/features/mood-board/components/ComponentShowcase';

export default function ButtonsSection() {
    return (
        <SectionWrapper
            id="buttons"
            title="Buttons"
            description="All button styles and states"
        >
            {/* EN: Glass Buttons / VI: Glass Buttons */}
            <ComponentShowcase
                title="Glass Buttons"
                description="Glassmorphism button styles"
                code={`<button className="glass-button">Default Glass</button>
<button className="glass-button" disabled>Disabled</button>`}
                darkBg
            >
                <div className="flex gap-4 flex-wrap">
                    <button className="glass-button">Default Glass</button>
                    <button className="glass-button hover:bg-glass-bg-hover">
                        Hover Me
                    </button>
                    <button className="glass-button" disabled>
                        Disabled
                    </button>
                </div>
            </ComponentShowcase>

            {/* EN: Primary Buttons / VI: Primary Buttons */}
            <ComponentShowcase
                title="Primary Buttons (Accent)"
                description="Brand primary button with X.ai blue"
                code={`<button className="bg-accent-primary text-white px-6 py-3 rounded-md font-medium hover:bg-accent-primary-hover transition-all">
  Primary Action
</button>`}
            >
                <div className="flex gap-4 flex-wrap">
                    <button className="bg-accent-primary text-white px-6 py-3 rounded-md font-medium hover:bg-accent-primary-hover transition-all btn-press">
                        Primary Action
                    </button>
                    <button className="bg-accent-primary text-white px-6 py-3 rounded-md font-medium opacity-50 cursor-not-allowed">
                        Disabled Primary
                    </button>
                </div>
            </ComponentShowcase>

            {/* EN: Secondary Buttons / VI: Secondary Buttons */}
            <ComponentShowcase
                title="Secondary Buttons"
                description="Secondary button style with border"
                code={`<button className="border border-border-primary text-text-primary px-6 py-3 rounded-md font-medium hover:border-border-secondary transition-all">
  Secondary Action
</button>`}
            >
                <div className="flex gap-4 flex-wrap">
                    <button className="border border-border-primary text-text-primary px-6 py-3 rounded-md font-medium hover:border-border-secondary hover:bg-bg-secondary transition-all btn-press">
                        Secondary Action
                    </button>
                    <button className="border border-border-primary text-text-primary px-6 py-3 rounded-md font-medium opacity-50 cursor-not-allowed">
                        Disabled Secondary
                    </button>
                </div>
            </ComponentShowcase>

            {/* EN: Button Sizes / VI: Button Sizes */}
            <ComponentShowcase
                title="Button Sizes"
                description="Different button size variants"
                code={`<button className="glass-button text-xs px-3 py-1.5">Small</button>
<button className="glass-button text-sm px-4 py-2">Medium</button>
<button className="glass-button text-base px-6 py-3">Large</button>`}
                darkBg
            >
                <div className="flex gap-4 items-center flex-wrap">
                    <button className="glass-button text-xs px-3 py-1.5">Small</button>
                    <button className="glass-button text-sm px-4 py-2">Medium</button>
                    <button className="glass-button text-base px-6 py-3">Large</button>
                    <button className="glass-button text-lg px-8 py-4">Extra Large</button>
                </div>
            </ComponentShowcase>

            {/* EN: Icon Buttons / VI: Icon Buttons */}
            <ComponentShowcase
                title="Icon Buttons"
                description="Square icon buttons for actions"
                code={`<button className="glass-button w-10 h-10 flex items-center justify-center">
  ×
</button>`}
                darkBg
            >
                <div className="flex gap-4 flex-wrap">
                    <button className="glass-button w-10 h-10 flex items-center justify-center">
                        ×
                    </button>
                    <button className="glass-button w-10 h-10 flex items-center justify-center">
                        ✓
                    </button>
                    <button className="glass-button w-10 h-10 flex items-center justify-center">
                        ⋮
                    </button>
                    <button className="glass-button w-12 h-12 flex items-center justify-center rounded-full">
                        ✎
                    </button>
                </div>
            </ComponentShowcase>
        </SectionWrapper>
    );
}
