import { cn } from '@/lib/utils';
import { useState } from 'react';

type Spec = Partial<Record<'os' | 'processor' | 'memory' | 'graphics' | 'storage', string>>;
export type Requirements = { minimum?: Spec; recommended?: Spec };

const ROWS = [['os', 'OS'], ['processor', 'Processor'], ['memory', 'Memory'], ['graphics', 'Graphics'], ['storage', 'Storage']] as const;

export default function SystemRequirements({ requirements }: { requirements: Requirements }) {
    const tiers = (['minimum', 'recommended'] as const).filter((t) => requirements[t]);
    const [tier, setTier] = useState<(typeof tiers)[number]>(tiers[0]);
    const spec = requirements[tier] ?? {};

    return (
        <div className="overflow-hidden rounded-2xl border border-border bg-card/60 shadow-soft">
            <div role="tablist" aria-label="Requirement level" className="flex gap-1 border-b border-border p-1.5">
                {tiers.map((t) => (
                    <button key={t} role="tab" aria-selected={tier === t} onClick={() => setTier(t)} className={cn('rounded-lg px-4 py-1.5 text-sm font-medium capitalize transition', tier === t ? 'bg-accent text-foreground' : 'text-muted-foreground hover:text-foreground')}>{t}</button>
                ))}
            </div>
            <dl role="tabpanel">
                {ROWS.filter(([k]) => spec[k]).map(([k, label], i) => (
                    <div key={k} className={cn('grid grid-cols-[110px_1fr] gap-4 px-4 py-3 text-sm', i > 0 && 'border-t border-border')}>
                        <dt className="text-muted-foreground">{label}</dt>
                        <dd>{spec[k]}</dd>
                    </div>
                ))}
            </dl>
        </div>
    );
}