import { ReactNode } from 'react';

import styles from './library-header-bar.module.css';

import { PlayButton, PlayButtonProps } from '/@/renderer/features/shared/components/play-button';
import { Badge, BadgeProps } from '/@/shared/components/badge/badge';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { TextTitle } from '/@/shared/components/text-title/text-title';

interface LibraryHeaderBarProps {
    children: ReactNode;
}

export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
    return <div className={styles.headerContainer}>{children}</div>;
};

interface TitleProps {
    children: ReactNode;
}

const HeaderPlayButton = ({ className, ...props }: PlayButtonProps) => {
    return (
        <div className={styles.playButtonContainer}>
            <PlayButton
                className={className}
                {...props}
            />
        </div>
    );
};

const Title = ({ children }: TitleProps) => {
    return (
        <TextTitle
            fw={700}
            order={1}
            overflow="hidden"
        >
            {children}
        </TextTitle>
    );
};

interface HeaderBadgeProps extends BadgeProps {
    isLoading?: boolean;
}

const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
    return <Badge {...props}>{isLoading ? <SpinnerIcon /> : children}</Badge>;
};

LibraryHeaderBar.Title = Title;
LibraryHeaderBar.PlayButton = HeaderPlayButton;
LibraryHeaderBar.Badge = HeaderBadge;