'use client';

import React from 'react';

const Select = ({
    value,
    onChange,
    options = [],
    placeholder = 'Select an option...',
    label,
    error,
    required = false,
    disabled = false,
    className = '',
    description,
    ...props
}) => {
    const baseSelectClassName = `w-full cursor-pointer px-[10px] py-[7px] rounded-lg text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 ${
        error ? 'border-red-500/50 dark:border-red-500/50' : ''
    } ${className}`;

    const handleChange = (e) => {
        onChange?.(e.target.value);
    };

    return (
        <div className="space-y-2">
            {label && (
                <label className="block text-xs font-medium text-neutral-700 dark:text-white">
                    {label}
                    {required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
                </label>
            )}
            
            <select
                value={value ?? ''}
                onChange={handleChange}
                className={baseSelectClassName}
                disabled={disabled}
                {...props}
            >
                {placeholder && (
                    <option value="" disabled>
                        {placeholder}
                    </option>
                )}
                {options.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>
            
            {error && (
                <p className="text-red-600 dark:text-red-400 text-xs">{error}</p>
            )}
            
            {description && !error && (
                <p className="text-xs text-neutral-500 dark:text-neutral-400 opacity-75">{description}</p>
            )}
        </div>
    );
};

export default Select; 