Phone Country Input

'use client';

import './PhoneCountryInput.css';

/**
 * PhoneCountryInput — Accessible phone input with country dial code selector and dark glass styling.
 * 
 * @param {string} id - HTML ID for the phone input.
 * @param {string} label - Input label text. Default is 'Phone Number'.
 * @param {string} name - Form field name. Default is 'phone'.
 * @param {string} placeholder - Phone placeholder. Default is '612 345 678'.
 * @param {boolean} required - HTML required field attribute.
 */
export interface PhoneCountryInputProps {
  id: string;
  label?: string;
  name?: string;
  placeholder?: string;
  required?: boolean;
}

export function PhoneCountryInput({
  id = 'phone-number-input',
  label = 'Phone Number',
  name = 'phone',
  placeholder = '612 345 678',
  required = false,
}: PhoneCountryInputProps) {
  const countries = [
    { code: '+34', flag: '🇪🇸', name: 'ES' },
    { code: '+1', flag: '🇺🇸', name: 'US' },
    { code: '+44', flag: '🇬🇧', name: 'UK' },
    { code: '+49', flag: '🇩🇪', name: 'DE' },
    { code: '+33', flag: '🇫🇷', name: 'FR' },
    { code: '+52', flag: '🇲🇽', name: 'MX' },
    { code: '+54', flag: '🇦🇷', name: 'AR' },
  ];
  return (
    <>
      <div className="phone-group" data-rk-8315ab="">
        <label htmlFor={id} className="phone-group__label" data-rk-8315ab="">{label}</label>
      
        <div className="phone-group__wrap" data-rk-8315ab="">
          <div className="phone-group__prefix" data-rk-8315ab="">
            <select className="phone-group__select" aria-label="Country calling code" name={`${name}_country`} data-rk-8315ab="">
              {countries.map((c, __i: number) => (
                <option key={__i} value={c.code} data-rk-8315ab="">
                  {c.flag} {c.code}
                </option>
              ))}
            </select>
            <span className="phone-group__arrow" aria-hidden="true" data-rk-8315ab="">▾</span>
          </div>
      
          <input type="tel" id={id} name={name} placeholder={placeholder} required={required} className="phone-group__input" autoComplete="tel-national" data-rk-8315ab="" />
        </div>
      </div>
    </>
  );
}

export default PhoneCountryInput;

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

.phone-group:where([data-rk-8315ab]) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 0.5rem);
  width: 100%;
  max-width: 380px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.phone-group__label:where([data-rk-8315ab]) {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text-1, #ffffff);
}

.phone-group__wrap:where([data-rk-8315ab]) {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-group__wrap:focus-within:where([data-rk-8315ab]) {
  border-color: rgba(184, 134, 11, 0.5);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

.phone-group__prefix:where([data-rk-8315ab]) {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.phone-group__select:where([data-rk-8315ab]) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--c-text-1, #ffffff);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.75rem 1.6rem 0.75rem 0.85rem;
  cursor: pointer;
  outline: none;
}

.phone-group__select:where([data-rk-8315ab]) option:where([data-rk-8315ab]) {
  background: #111116;
  color: #ffffff;
}

.phone-group__arrow:where([data-rk-8315ab]) {
  position: absolute;
  right: 0.5rem;
  font-size: 0.7rem;
  color: var(--c-text-3, #737373);
  pointer-events: none;
}

.phone-group__input:where([data-rk-8315ab]) {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.75rem 1rem;
  color: var(--c-text-1, #ffffff);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
}

.phone-group__input:where([data-rk-8315ab])::placeholder {
  color: rgba(255, 255, 255, 0.3);
}