import { adminComponentStyles } from "./design-system";

interface AdminSelectOption {
  value: string | number;
  label: string;
  disabled?: boolean;
}

interface AdminSelectProps
  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children" | "label"> {
  label?: React.ReactNode;
  error?: string;
  helperText?: React.ReactNode;
  options: AdminSelectOption[];
  placeholder?: string;
}

export default function AdminSelect({
  label,
  error,
  helperText,
  options,
  placeholder,
  className = "",
  id,
  ...props
}: AdminSelectProps) {
  const inputId = id || `select-${Math.random().toString(36).substr(2, 9)}`;

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={inputId}
          className="mb-1.5 block text-sm font-medium text-slate-300"
        >
          {label}
          {props.required && <span className="ml-1 text-rose-400">*</span>}
        </label>
      )}
      <select
        id={inputId}
        className={`${adminComponentStyles.input.base} appearance-none pr-10 ${
          error ? adminComponentStyles.input.error : ""
        } ${props.disabled ? adminComponentStyles.input.disabled : ""} ${className}`}
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E\")",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "right 0.75rem center",
        }}
        {...props}
      >
        {placeholder && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {options.map((option) => (
          <option
            key={option.value}
            value={option.value}
            disabled={option.disabled}
          >
            {option.label}
          </option>
        ))}
      </select>
      {error && <p className="mt-1 text-xs text-rose-400">{error}</p>}
      {helperText && !error && (
        <p className="mt-1 text-xs text-slate-500">{helperText}</p>
      )}
    </div>
  );
}
