'use client';

import { useState } from 'react';
import { ChevronDown, MapPin } from 'lucide-react';
import { useRegion } from '@/contexts/RegionContext';
import { RegionPickerModal } from '@/components/layout/RegionPickerModal';
import { cn } from '@/lib/utils';

export function RegionPicker({
  className,
  variant = 'light',
}: {
  className?: string;
  variant?: 'light' | 'dark';
}) {
  const { slug, label, setRegion } = useRegion();
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={`Current area: ${label}. Change area`}
        aria-haspopup="dialog"
        aria-expanded={open}
        className={cn(
          variant === 'dark'
            ? 'site-header-region'
            : cn(
                'inline-flex h-9 max-w-[9.5rem] items-center gap-1.5 rounded-lg border border-border bg-white pl-2.5 pr-2',
                'text-xs font-semibold text-slate-700 transition-colors',
                'hover:border-slate-300 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary',
                'active:bg-slate-100 sm:max-w-[13rem]'
              ),
          className
        )}
      >
        <MapPin
          className={cn(
            'h-3.5 w-3.5 shrink-0',
            variant === 'dark' ? 'text-amber-400' : 'text-primary'
          )}
        />
        <span className="min-w-0 truncate" title={label}>
          {label}
        </span>
        <ChevronDown
          className={cn(
            'h-3.5 w-3.5 shrink-0 transition-transform',
            variant === 'dark' ? 'text-slate-400' : 'text-slate-400',
            open && 'rotate-180'
          )}
        />
      </button>

      <RegionPickerModal
        open={open}
        onClose={() => setOpen(false)}
        currentSlug={slug}
        onSelect={setRegion}
      />
    </>
  );
}