import ThemeToggle from '@/ui/components/internal/theme-toggle';
import Link from 'next/link';

export type HeaderLinksProps = {
    links: Array<{
        href: string;
        label: string;
        condition: boolean;
    }>;
};

export type ProfileButtonProps = {
    userButton: React.ReactNode;
};

export const BaseDesktopHeader = ({
    links,
    userButton,
}: HeaderLinksProps & ProfileButtonProps) => {
    return (
        <>
            <div className='flex w-3/5 flex-row items-center justify-around align-middle'>
                {links
                    .filter((link) => link.condition)
                    .map((link) => (
                        <Link
                            key={link.href}
                            href={link.href}
                            className='text-xl font-normal transition-colors hover:font-bold hover:text-primary'
                        >
                            {link.label}
                        </Link>
                    ))}
            </div>

            <div className='flex items-center space-x-4'>
                <ThemeToggle></ThemeToggle>
                {userButton}
            </div>
        </>
    );
};