"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface LanguageOption {
  code: string;
  label: string;
  region: string;
}

const defaultLanguages: LanguageOption[] = [
  { code: "en", label: "English", region: "United States" },
  { code: "es", label: "Spanish", region: "Spain" },
  { code: "fr", label: "French", region: "France" },
  { code: "de", label: "German", region: "Germany" },
  { code: "pt", label: "Portuguese", region: "Brazil" },
  { code: "ja", label: "Japanese", region: "Japan" },
];

interface LanguageSelectorProps {
  className?: string;
  options?: LanguageOption[];
  value?: string;
  defaultValue?: string;
  onChange?: (code: string) => void;
  placeholder?: string;
}

export function LanguageSelector({
  className,
  options = defaultLanguages,
  value,
  defaultValue = "en",
  onChange,
  placeholder = "Select language",
}: LanguageSelectorProps) {
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const activeValue = value ?? internalValue;

  const selectedOption = options.find((option) => option.code === activeValue);

  const filteredOptions = options.filter((option) => {
    const search = query.toLowerCase();
    return (
      option.label.toLowerCase().includes(search) ||
      option.region.toLowerCase().includes(search) ||
      option.code.toLowerCase().includes(search)
    );
  });

  const handleSelect = (code: string) => {
    if (!value) {
      setInternalValue(code);
    }
    onChange?.(code);
    setOpen(false);
    setQuery("");
  };

  return (
    <div className={cn("relative w-full max-w-xs", className)}>
      <button
        type="button"
        className={cn(
          "flex w-full items-center justify-between rounded-lg border border-border bg-background px-3 py-2",
          "text-sm text-foreground"
        )}
        onClick={() => setOpen((prev) => !prev)}
        aria-expanded={open}
        aria-haspopup="listbox"
      >
        <span className="flex items-center gap-2">
          <FlagIcon code={selectedOption?.code ?? ""} />
          <span>{selectedOption?.label ?? placeholder}</span>
        </span>
        <ChevronIcon className={cn("h-4 w-4", open ? "rotate-180" : "rotate-0")} />
      </button>

      {open ? (
        <div className="absolute z-10 mt-2 w-full rounded-lg border border-border bg-card p-3">
          <div className="flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1">
            <SearchIcon className="h-4 w-4 text-muted-foreground" />
            <input
              type="text"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              placeholder="Search languages"
              className={cn(
                "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground",
                "focus-visible:outline-none"
              )}
            />
          </div>
          <ul
            role="listbox"
            className="mt-3 max-h-48 space-y-1 overflow-y-auto"
          >
            {filteredOptions.length === 0 ? (
              <li className="rounded-md border border-border bg-background px-3 py-2 text-sm text-muted-foreground">
                No matches found
              </li>
            ) : (
              filteredOptions.map((option) => {
                const isSelected = option.code === activeValue;
                return (
                  <li key={option.code}>
                    <button
                      type="button"
                      role="option"
                      aria-selected={isSelected}
                      className={cn(
                        "flex w-full items-center justify-between rounded-md border border-border",
                        "bg-background px-3 py-2 text-left text-sm transition",
                        isSelected
                          ? "text-primary"
                          : "text-foreground hover:bg-muted"
                      )}
                      onClick={() => handleSelect(option.code)}
                    >
                      <span className="flex items-center gap-2">
                        <FlagIcon code={option.code} />
                        <span>
                          {option.label}
                          <span className="ml-2 text-xs text-muted-foreground">{option.region}</span>
                        </span>
                      </span>
                      {isSelected ? (
                        <span className="text-xs text-muted-foreground">Selected</span>
                      ) : null}
                    </button>
                  </li>
                );
              })
            )}
          </ul>
        </div>
      ) : null}
    </div>
  );
}

function FlagIcon({ code }: { code: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className="h-4 w-4"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M5 4v16" />
      <path d="M5 5h10l-1.5 3L15 11H5" />
      {code ? <circle cx="17.5" cy="16.5" r="2.5" /> : null}
    </svg>
  );
}

function ChevronIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-3.5-3.5" />
    </svg>
  );
}
Language Selector

Dependencies

Files

Installation
