import React, { PropsWithChildren } from 'react';
import { AdsClickIcon } from '../Icons/AdsClickIcon';

export default function SourceDropdownContainer({
    children,
    isCollapsed,
    onExpand,
}: PropsWithChildren<{ isCollapsed: boolean; onExpand: () => void }>) {
    return (
        <div className="inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]">
            {isCollapsed && (
                <button aria-label="Expand browse options" onClick={onExpand} className="flex items-center">
                    <AdsClickIcon aria-hidden className="mx-2 fill-blue-300" />
                </button>
            )}
            {!isCollapsed && (
                <>
                    <div className="flex items-center pr-1">
                        <AdsClickIcon aria-hidden className="mx-2 fill-blue-300" />
                        <span className="sr-only">Browse</span>
                    </div>
                    {children}
                </>
            )}
        </div>
    );
}