// app/components/admin/CommonComponents/FormSelect.tsx
'use client';

import React from 'react';

export interface SelectOption {
  value: string;
  label: string;
}

interface FormSelectProps {
  id: string;
  name: string;
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  options: SelectOption[];
  placeholder?: string;
  hint?: string;
  required?: boolean;
  disabled?: boolean;
  className?: string;
}

export default function FormSelect({
  id,
  name,
  label,
  value,
  onChange,
  options,
  placeholder = 'Select an option',
  hint,
  required = false,
  disabled = false,
  className = '',
}: FormSelectProps) {
  return (
    <div className={className}>
      <label htmlFor={id} className="block text-sm font-medium text-var-text mb-2">
        {label}
        {required && <span className="text-var-danger ml-1">*</span>}
      </label>

      <select
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        required={required}
        disabled={disabled}
        className="w-full px-3 py-2 border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary bg-var-input text-var-text transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <option value="">{placeholder}</option>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      {hint && <p className="text-sm text-var-text-muted mt-1">{hint}</p>}
    </div>
  );
}