import { Icon } from '../Icon';

interface Props {
    path: string | null;
    exists: boolean;
    onClick: () => void;
}

export const DirectoryButton = ({ path, exists, onClick }: Props) => {
    const isSet = !!(path && path.trim());
    const isValid = isSet && exists;
    const label = isValid ? 'Game folder' : 'Set game folder';
    const tooltip = isValid ? (path as string) : 'Please select a game folder';
    const ariaLabel = isValid ? `Game folder: ${path}` : 'Set game folder';

    return (
        <button
            type="button"
            className={`dirbtn ${isValid ? 'dirbtn-set' : 'dirbtn-unset'}`}
            title={tooltip}
            aria-label={ariaLabel}
            onClick={onClick}
        >
            <Icon.folder />
            <span className="dirbtn-label">{label}</span>
            <span className="dirbtn-status-dot" aria-hidden="true" />
        </button>
    );
};