Select

import {
	Select as PDSSelect,
	SelectProps as PDSSelectProps,
} from '@pantheon-systems/pds-toolkit-react';

import { mergeClasses } from '../_base/Button/utils';

import './select.css';

export type SelectVariant = 'bare' | 'default';

export interface SelectProps extends PDSSelectProps {
	/**
	 * The look of the trigger. `default` is the PDS Select. `bare` has no
	 * border, fill or container: the selected value and the chevron sit on the
	 * surface, and the value goes from secondary to default text on hover and
	 * while open. The label is hidden (still read by screen readers), the
	 * trigger hugs the selected value, and the list is as wide as its longest
	 * option.
	 */
	variant?: SelectVariant;
}

/**
 * Select UI component. The PDS Select with a `bare` variant, for a picker that
 * sits inline in a toolbar (for example the model picker in a chat input).
 */
export const Select = ({
	className,
	showLabel,
	variant = 'default',
	...props
}: SelectProps) => {
	const isBare = variant === 'bare';

	return (
		<PDSSelect
			className={mergeClasses([isBare ? 'pds-select--bare' : null, className])}
			showLabel={isBare ? false : showLabel}
			{...props}
		/>
	);
};