Modern Select

'use client';

import './ModernSelect.css';

/**
 * ModernSelect — A styled dropdown selector with a custom arrow and glassmorphism styling.
 * 
 * @param {string} label - Input labeling title.
 * @param {string} id - HTML ID for the select element.
 * @param {string} name - HTML name binding.
 * @param {Array<{label: string, value: string, disabled?: boolean}>} options - List of select options.
 * @param {boolean} required - HTML required attribute.
 */
export interface ModernSelectProps {
  label: string;
  id: string;
  name?: string;
  options: Array<{ label: string; value: string; disabled?: boolean }>;
  required?: boolean;
}

export function ModernSelect({ label, id, name, options = [], required = false }: ModernSelectProps) {
  return (
    <>
      <div className="select-container" data-rk-9684b2="">
        <label htmlFor={id} className="select-label" data-rk-9684b2="">{label}</label>
        <div className="select-wrap" data-rk-9684b2="">
          <select className="custom-select" id={id} name={name} required={required} data-rk-9684b2="">
            {options.map((opt, __i: number) => (
              <option key={__i} value={opt.value} disabled={opt.disabled} data-rk-9684b2="">{opt.label}</option>
            ))}
          </select>
          <div className="select-arrow" aria-hidden="true" data-rk-9684b2="">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" data-rk-9684b2="">
              <path d="M6 9l6 6 6-6" data-rk-9684b2="" />
            </svg>
          </div>
        </div>
      </div>
    </>
  );
}

export default ModernSelect;

/* ModernSelect — ported from astro-component-kit (forms/ModernSelect.astro) */

.select-container:where([data-rk-9684b2]) { display: flex; flex-direction: column; gap: var(--sp-2, 0.5rem); width: 100%; }
.select-label:where([data-rk-9684b2]) { font-size: 0.85rem; font-weight: 600; color: var(--c-text-2, #94a3b8); margin-left: 0.5rem; }

.select-wrap:where([data-rk-9684b2]) { position: relative; width: 100%; }

.custom-select:where([data-rk-9684b2]) { 
  width: 100%; 
  padding: 0.8rem 2.5rem 0.8rem 1rem; 
  background: var(--c-bg-elev, rgba(255,255,255,0.04)); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-md, 12px); 
  color: var(--c-text-1, #fff); 
  appearance: none; cursor: pointer; outline: none; 
  font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}

.custom-select:focus:where([data-rk-9684b2]) { 
  border-color: var(--c-primary, #6366f1); 
  background: rgba(255,255,255,0.06);
}

.select-arrow:where([data-rk-9684b2]) { 
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); 
  color: var(--c-text-2, #64748b); 
  pointer-events: none; transition: transform 0.2s;
  display: flex; align-items: center; justify-content: center;
}

.custom-select:focus:where([data-rk-9684b2]) + .select-arrow:where([data-rk-9684b2]) { 
  transform: translateY(-50%) rotate(180deg); 
  color: var(--c-primary, #6366f1); 
}