/**
 * EN: Color Palette Section - All design token colors
 * VI: Color Palette Section - Tất cả color tokens từ design system
 */
import SectionWrapper from '@/features/mood-board/components/SectionWrapper';
import ColorSwatch from '@/features/mood-board/components/ColorSwatch';

export default function ColorPaletteSection() {
    return (
        <SectionWrapper
            id="colors"
            title="Color Palette"
            description="All color tokens - backgrounds, text, borders, accents (Dark/Light mode)"
        >
            {/* EN: Background Colors / VI: Màu nền */}
            <div>
                <h3 className="text-xl font-semibold mb-4 text-text-primary">
                    Background Colors
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <ColorSwatch name="--bg-primary" var="var(--bg-primary)" />
                    <ColorSwatch name="--bg-secondary" var="var(--bg-secondary)" />
                    <ColorSwatch name="--bg-tertiary" var="var(--bg-tertiary)" />
                    <ColorSwatch name="--bg-elevated" var="var(--bg-elevated)" />
                </div>
            </div>

            {/* EN: Text Colors / VI: Màu chữ */}
            <div>
                <h3 className="text-xl font-semibold mb-4 text-text-primary">
                    Text Colors (WCAG Compliant)
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <ColorSwatch name="--text-primary" var="var(--text-primary)" />
                    <ColorSwatch name="--text-secondary" var="var(--text-secondary)" />
                    <ColorSwatch name="--text-tertiary" var="var(--text-tertiary)" />
                    <ColorSwatch name="--text-muted" var="var(--text-muted)" />
                </div>
            </div>

            {/* EN: Accent Colors / VI: Màu accent */}
            <div>
                <h3 className="text-xl font-semibold mb-4 text-text-primary">
                    Accent Colors (X.ai Brand)
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                    <ColorSwatch name="--accent-primary" var="var(--accent-primary)" />
                    <ColorSwatch name="--accent-success" var="var(--accent-success)" />
                    <ColorSwatch name="--accent-warning" var="var(--accent-warning)" />
                    <ColorSwatch name="--accent-error" var="var(--accent-error)" />
                    <ColorSwatch name="--accent-info" var="var(--accent-info)" />
                </div>
            </div>

            {/* EN: Border Colors / VI: Màu viền */}
            <div>
                <h3 className="text-xl font-semibold mb-4 text-text-primary">
                    Border Colors
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <ColorSwatch name="--border-primary" var="var(--border-primary)" />
                    <ColorSwatch
                        name="--border-secondary"
                        var="var(--border-secondary)"
                    />
                    <ColorSwatch name="--border-focus" var="var(--border-focus)" />
                </div>
            </div>

            {/* EN: Chat Colors / VI: Màu chat */}
            <div>
                <h3 className="text-xl font-semibold mb-4 text-text-primary">
                    Chat Specific Colors
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <ColorSwatch name="--chat-user-bubble" var="var(--chat-user-bubble)" />
                    <ColorSwatch name="--chat-user-text" var="var(--chat-user-text)" />
                    <ColorSwatch name="--chat-ai-text" var="var(--chat-ai-text)" />
                </div>
            </div>
        </SectionWrapper>
    );
}
