import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import type { UserRole } from '@/types/auth';

type Props = {
    title: string;
    description: string;
    roles?: UserRole[];
};

const roleLabels: Record<UserRole, string> = {
    admin: 'Admin',
    manager: 'Manager',
    technician: 'Technician',
    customer: 'Customer',
};

const roleBadgeStyles: Record<UserRole, string> = {
    admin: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950/60 dark:text-violet-300',
    manager: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950/60 dark:text-sky-300',
    technician: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300',
    customer: 'border-border bg-muted text-muted-foreground',
};

export function DocsPageHeader({ title, description, roles }: Props) {
    return (
        <header className="mb-8 space-y-3 border-b border-border pb-6">
            <div className="flex flex-wrap items-center gap-2">
                <h1 className="text-3xl font-semibold tracking-tight text-foreground">
                    {title}
                </h1>
                {roles?.map((role) => (
                    <Badge
                        key={role}
                        variant="outline"
                        className={cn(
                            'font-medium uppercase',
                            roleBadgeStyles[role],
                        )}
                    >
                        {roleLabels[role]} only
                    </Badge>
                ))}
            </div>
            <p className="max-w-2xl text-base leading-relaxed text-muted-foreground">
                {description}
            </p>
        </header>
    );
}