import Link from 'next/link';
import { Button } from '../ui';
import React from 'react';
import { cn } from '@/lib/utils';

export function SubNav() {
    return (
        <div className="font-[500] text-[16px] flex justify-between xl:w-[1200px] 2xl:w-[1500px] h-[50px]">
            <SectionLink href="#" className="rounded-tl-[5px] rounded-bl-4xl">
                ТЕГИ
            </SectionLink>
            <SectionLink href="#" className="border-x border-light-violet">
                КАТЕГОРИИ
            </SectionLink>
            <SectionLink href="#" className="border-x border-light-violet">
                ПЕРСОНАЖИ
            </SectionLink>
            <SectionLink href="#" className="rounded-tr-[5px] rounded-br-4xl">
                КОЛЛЕКЦИИ
            </SectionLink>
        </div>
    );
}

function SectionLink({
    children,
    href,
    className,
}: React.PropsWithChildren & { href: string; className?: string }) {
    return (
        <Button
            asChild
            className={cn(
                'bg-violet grow py-3.5 w-full hover:bg-light-violet',
                className,
            )}
            variant={'ghost'}
            size={'text'}
        >
            <Link href={href}>{children}</Link>
        </Button>
    );
}