import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { listType } from '@/shared/types';
import { Dispatch, SetStateAction } from 'react';

type TSelectOptionProps = {
	setValue: Dispatch<SetStateAction<string>>;
	value?: string;
	list: listType[];
	placeholder: string;
	style?: string;
	defaultValue?: string;
	variant?: 'default' | 'ghost';
	disabled?: boolean;
};

const SelectOption = ({ setValue, value, list, placeholder, style, defaultValue, variant, disabled }: TSelectOptionProps) => {
	// Use value if provided, otherwise use defaultValue
	const selectProps = value !== undefined ? { value } : { defaultValue };
	
	return (
		<Select onValueChange={setValue} {...selectProps} disabled={disabled}>
			<SelectTrigger className={cn('w-[346px] h-12!', style)} variant={variant} disabled={disabled}>
				<SelectValue placeholder={placeholder} />
			</SelectTrigger>
			<SelectContent>
				{list.map(({ label, value }: listType) => (
					<SelectItem key={label} value={value}>
						{label}
					</SelectItem>
				))}
			</SelectContent>
		</Select>
	);
};

export default SelectOption;