type InputProps = {
    id: string;
    required: boolean;
    className?: string;
    type: 'text' | 'tel' | 'mail' | 'textarea' | 'checkbox' | 'select' | 'email';
    placeholder: string;
    description: string;
    error: boolean;
    options?: {
        value: string;
        label: string;
    }[];
    value: string | boolean;
    onChange: (value: string | boolean) => void;
    children?: React.ReactNode; // Slot 用法
};

export default function Ipnut({
    id = '',
    required = false,
    type = 'text',
    placeholder = 'Placeholder',
    description = 'Hint Text',
    error = false,
    className = '',
    options = [],
    value = '',
    onChange = () => { },
    children = null
}: InputProps) {
    if (type === 'textarea') {
        return (
            <div className={`inputText ${className}`}>
                <textarea
                    rows={1}
                    className="inputText-input inputText-input--textarea"
                    name={id}
                    id={id}
                    placeholder={placeholder}
                    required={required}
                    value={String(value)}
                    onChange={(e) => onChange(e.target.value)}
                ></textarea>
                <p className="inputText-description">{description}</p>
                {error && <p className="inputText-error">這是錯誤提示文字</p>}
            </div>
        );
    } else if (type === 'select') {
        return (
            <>
                <div className="inputText-select">
                    <select
                        className={`inputText-input inputText-input--select ${className}`}
                        name={id}
                        id={id}
                        value={String(value)}
                        onChange={(e) => onChange(e.target.value)}
                        required={required}
                    >
                        <option value="" disabled>
                            {placeholder}
                        </option>
                        {options?.map((option) => (
                            <option key={option.value} value={option.value}>
                                {option.label}
                            </option>
                        ))}
                    </select>
                    <i className="icon-arrowDown inputText-selectIcon"></i>
                </div>
                <p className="inputText-description">{description}</p>
                {error && <p className="inputText-error">這是錯誤提示文字</p>}
            </>
        );
    } else if (type === 'checkbox') {
        return (
            <div className="checkbox">
                <label className="flex items-center gap-14">
                    <input
                        className={`checkbox-input ${className}`}
                        type="checkbox"
                        name={id}
                        id={id}
                        required={required}
                        checked={Boolean(value)}
                        onChange={(e) => onChange(e.target.checked)} />
                    <span className="checkbox-label">
                        {children}
                    </span>
                </label>
            </div>
        )
    } else if (
        type === 'mail'
    ) {

        return (
            <div className={`inputText ${className}`}>
                <input
                    className="inputText-input"
                    type="email"
                    name={id}
                    id={id}
                    pattern="[a-z0-9._\-\+\%]+@[a-z0-9.\-]+\.[a-z]{2,4}$"
                    placeholder={placeholder}
                    required={required}
                    value={String(value)}
                    onChange={(e) => onChange(e.target.value)}
                />
                <p className="inputText-description">{description}</p>
                {error && <p className="inputText-error">這是錯誤提示文字</p>}
            </div>
        );
    } else {
        return (
            <div className={`inputText ${className}`}>
                <input
                    className="inputText-input"
                    type={type}
                    name={id}
                    id={id}
                    placeholder={placeholder}
                    required={required}
                    value={String(value)}
                    onChange={(e) => onChange(e.target.value)}
                />
                <p className="inputText-description">{description}</p>
                {error && <p className="inputText-error">這是錯誤提示文字</p>}
            </div>
        );
    }
}