import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

import { useBoardViewSize } from '../boardViewSize';

type BoardColumnHeaderProps = {
    title: string;
    count: number;
};

const BoardColumnHeader = ({ title, count }: BoardColumnHeaderProps) => {
    const tokens = useBoardViewSize();

    return (
        <div className={cn(
            'board-view__column-header flex shrink-0 items-center justify-between gap-2 border-b bg-secondary/50',
            tokens?.headerPadding,
        )}>
            <span className={cn('truncate', tokens?.headerTitleClass)}>{title}</span>
            <Badge variant="secondary">{count}</Badge>
        </div>
    );
};

export default BoardColumnHeader;
