"use client";

import { forwardRef } from "react";
import type { SelectHTMLAttributes } from "react";
import styles from "./FormField.module.css";

interface SelectFieldProps extends SelectHTMLAttributes<HTMLSelectElement> {
  label: string;
  error?: string;
  hint?: string;
  required?: boolean;
  children: React.ReactNode;
}

const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
  ({ label, error, hint, required, id, children, className = "", ...props }, ref) => {
    const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
    return (
      <div className={`${styles.field} ${error ? styles.hasError : ""}`}>
        <label htmlFor={fieldId} className={styles.label}>
          {label}
          {required && <span className={styles.required} aria-label="wajib">*</span>}
        </label>
        <select
          ref={ref}
          id={fieldId}
          className={`form-control ${className} ${error ? styles.inputError : ""}`}
          aria-describedby={error ? `${fieldId}-error` : undefined}
          aria-invalid={!!error}
          {...props}
        >
          {children}
        </select>
        {hint && !error && (
          <p id={`${fieldId}-hint`} className={styles.hint}>{hint}</p>
        )}
        {error && (
          <p id={`${fieldId}-error`} className={styles.error} role="alert">{error}</p>
        )}
      </div>
    );
  }
);

SelectField.displayName = "SelectField";
export default SelectField;