/**
 * EN: Spacing Section - Spacing scale and layout tokens
 * VI: Spacing Section - Spacing scale và layout tokens
 */
import SectionWrapper from '@/features/mood-board/components/SectionWrapper';
import ComponentShowcase from '@/features/mood-board/components/ComponentShowcase';

export default function SpacingSection() {
    return (
        <SectionWrapper
            id="spacing"
            title="Spacing & Layout"
            description="Spacing scale (4px base unit) and layout tokens"
        >
            {/* EN: Spacing Scale / VI: Spacing Scale */}
            <ComponentShowcase
                title="Spacing Scale"
                description="8-point grid system from --space-0 to --space-20"
                code={`<div className="space-y-1">0.25rem (4px)</div>
<div className="space-y-2">0.5rem (8px)</div>
<div className="space-y-4">1rem (16px)</div>
<div className="space-y-8">2rem (32px)</div>`}
            >
                <div className="space-y-4">
                    {[
                        { name: '--space-0', value: '0', px: '0px' },
                        { name: '--space-1', value: '0.25rem', px: '4px' },
                        { name: '--space-2', value: '0.5rem', px: '8px' },
                        { name: '--space-3', value: '0.75rem', px: '12px' },
                        { name: '--space-4', value: '1rem', px: '16px' },
                        { name: '--space-5', value: '1.25rem', px: '20px' },
                        { name: '--space-6', value: '1.5rem', px: '24px' },
                        { name: '--space-8', value: '2rem', px: '32px' },
                        { name: '--space-10', value: '2.5rem', px: '40px' },
                        { name: '--space-12', value: '3rem', px: '48px' },
                        { name: '--space-16', value: '4rem', px: '64px' },
                        { name: '--space-20', value: '5rem', px: '80px' },
                    ].map((token) => (
                        <div key={token.name} className="flex items-center gap-4">
                            <div
                                className="bg-accent-primary rounded"
                                style={{
                                    width: token.value,
                                    height: '24px',
                                    minWidth: '4px',
                                }}
                            />
                            <div>
                                <code className="text-sm font-mono text-text-primary">
                                    {token.name}
                                </code>
                                <span className="text-text-tertiary text-sm ml-2">
                                    {token.value} ({token.px})
                                </span>
                            </div>
                        </div>
                    ))}
                </div>
            </ComponentShowcase>

            {/* EN: Border Radius / VI: Border Radius */}
            <ComponentShowcase
                title="Border Radius"
                description="Minimal roundness for X.ai aesthetic"
                code={`<div className="rounded-sm">2px - Sharp</div>
<div className="rounded-md">4px - Buttons</div>
<div className="rounded-lg">8px - Cards</div>
<div className="rounded-full">9999px - Avatars</div>`}
            >
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {[
                        { name: '--radius-sm', value: '2px', class: 'rounded-sm' },
                        { name: '--radius-md', value: '4px', class: 'rounded-md' },
                        { name: '--radius-lg', value: '8px', class: 'rounded-lg' },
                        { name: '--radius-xl', value: '12px', class: 'rounded-xl' },
                        { name: '--radius-2xl', value: '16px', class: 'rounded-2xl' },
                        { name: '--radius-full', value: '9999px', class: 'rounded-full' },
                    ].map((radius) => (
                        <div key={radius.name} className="glass-card p-4">
                            <div
                                className={`bg-accent-primary w-full h-20 ${radius.class} mb-2`}
                            />
                            <p className="text-sm font-medium text-text-primary">
                                {radius.name}
                            </p>
                            <code className="text-xs text-text-tertiary font-mono">
                                {radius.value}
                            </code>
                        </div>
                    ))}
                </div>
            </ComponentShowcase>
        </SectionWrapper>
    );
}
