'use client';

import React, { forwardRef, useId } from 'react';

interface DropdownProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  error?: string;
}

export const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>(
  ({ label, error, className = '', id, children, ...props }, ref) => {
    const genId = useId();
    const selectId = id ?? genId;

    return (
      <div className="w-full">
        {label && (
          <label
            htmlFor={selectId}
            className="block text-sm font-medium text-text-secondary mb-1"
          >
            {label}
          </label>
        )}

        <select
          ref={ref}
          id={selectId}
          className={`
            form-select w-full appearance-none rounded-[var(--radius-md)] border
            ${error ? 'border-red-500' : 'border-border'}
            bg-background-card text-text-primary
            ps-3 pe-10 py-2.5 sm:py-2 text-base sm:text-sm
            focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
            disabled:opacity-50 disabled:cursor-not-allowed
            transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]
            ${className}
          `}
          {...props}
        >
          {children}
        </select>

        {error && (
          <p className="mt-1 text-sm text-red-500">
            {error}
          </p>
        )}
      </div>
    );
  },
);

Dropdown.displayName = 'Dropdown';
