brackt/app/components/league/TimezoneSelect.tsx

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";

export const TIMEZONE_OPTIONS: { region: string; zones: { value: string; label: string }[] }[] = [
  {
    region: "North America",
    zones: [
      { value: "America/New_York", label: "Eastern Time (ET)" },
      { value: "America/Chicago", label: "Central Time (CT)" },
      { value: "America/Denver", label: "Mountain Time (MT)" },
      { value: "America/Phoenix", label: "Mountain Time – Arizona (no DST)" },
      { value: "America/Los_Angeles", label: "Pacific Time (PT)" },
      { value: "America/Anchorage", label: "Alaska Time (AKT)" },
      { value: "Pacific/Honolulu", label: "Hawaii Time (HT)" },
      { value: "America/Toronto", label: "Eastern Time – Toronto" },
      { value: "America/Vancouver", label: "Pacific Time – Vancouver" },
      { value: "America/Edmonton", label: "Mountain Time – Edmonton" },
      { value: "America/Winnipeg", label: "Central Time – Winnipeg" },
      { value: "America/Halifax", label: "Atlantic Time – Halifax" },
      { value: "America/St_Johns", label: "Newfoundland Time" },
      { value: "America/Mexico_City", label: "Central Time – Mexico City" },
    ],
  },
  {
    region: "South America",
    zones: [
      { value: "America/Sao_Paulo", label: "Brasília Time (BRT)" },
      { value: "America/Argentina/Buenos_Aires", label: "Argentina Time (ART)" },
      { value: "America/Bogota", label: "Colombia Time (COT)" },
      { value: "America/Lima", label: "Peru Time (PET)" },
      { value: "America/Santiago", label: "Chile Time (CLT)" },
    ],
  },
  {
    region: "Europe",
    zones: [
      { value: "Europe/London", label: "GMT / British Time (GMT/BST)" },
      { value: "Europe/Dublin", label: "Irish Time (GMT/IST)" },
      { value: "Europe/Paris", label: "Central European Time (CET/CEST)" },
      { value: "Europe/Berlin", label: "Central European Time – Berlin" },
      { value: "Europe/Amsterdam", label: "Central European Time – Amsterdam" },
      { value: "Europe/Madrid", label: "Central European Time – Madrid" },
      { value: "Europe/Rome", label: "Central European Time – Rome" },
      { value: "Europe/Warsaw", label: "Central European Time – Warsaw" },
      { value: "Europe/Helsinki", label: "Eastern European Time (EET/EEST)" },
      { value: "Europe/Athens", label: "Eastern European Time – Athens" },
      { value: "Europe/Bucharest", label: "Eastern European Time – Bucharest" },
      { value: "Europe/Kyiv", label: "Eastern European Time – Kyiv" },
      { value: "Europe/Moscow", label: "Moscow Time (MSK)" },
    ],
  },
  {
    region: "Africa",
    zones: [
      { value: "Africa/Johannesburg", label: "South Africa Time (SAST)" },
      { value: "Africa/Cairo", label: "Eastern European Time – Cairo" },
      { value: "Africa/Lagos", label: "West Africa Time (WAT)" },
      { value: "Africa/Nairobi", label: "East Africa Time (EAT)" },
    ],
  },
  {
    region: "Asia / Middle East",
    zones: [
      { value: "Asia/Dubai", label: "Gulf Standard Time (GST)" },
      { value: "Asia/Riyadh", label: "Arabia Standard Time (AST)" },
      { value: "Asia/Kolkata", label: "India Standard Time (IST)" },
      { value: "Asia/Dhaka", label: "Bangladesh Standard Time (BST)" },
      { value: "Asia/Bangkok", label: "Indochina Time (ICT)" },
      { value: "Asia/Singapore", label: "Singapore Time (SGT)" },
      { value: "Asia/Shanghai", label: "China Standard Time (CST)" },
      { value: "Asia/Hong_Kong", label: "Hong Kong Time (HKT)" },
      { value: "Asia/Tokyo", label: "Japan Standard Time (JST)" },
      { value: "Asia/Seoul", label: "Korea Standard Time (KST)" },
      { value: "Asia/Karachi", label: "Pakistan Standard Time (PKT)" },
      { value: "Asia/Colombo", label: "Sri Lanka Time (SLST)" },
      { value: "Asia/Tehran", label: "Iran Standard Time (IRST)" },
      { value: "Asia/Jerusalem", label: "Israel Standard Time (IST/IDT)" },
    ],
  },
  {
    region: "Oceania",
    zones: [
      { value: "Australia/Sydney", label: "Australian Eastern Time (AEST/AEDT)" },
      { value: "Australia/Melbourne", label: "Australian Eastern Time – Melbourne" },
      { value: "Australia/Brisbane", label: "Australian Eastern Time – Queensland" },
      { value: "Australia/Adelaide", label: "Australian Central Time (ACST/ACDT)" },
      { value: "Australia/Perth", label: "Australian Western Time (AWST)" },
      { value: "Pacific/Auckland", label: "New Zealand Time (NZST/NZDT)" },
      { value: "Pacific/Fiji", label: "Fiji Time (FJT)" },
    ],
  },
  {
    region: "UTC / Other",
    zones: [
      { value: "UTC", label: "UTC (Coordinated Universal Time)" },
    ],
  },
];

interface TimezoneSelectProps {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  placeholder?: string;
  name?: string;
}

export function TimezoneSelect({
  value,
  onChange,
  disabled,
  placeholder = "Select timezone…",
  name,
}: TimezoneSelectProps) {
  return (
    <Select value={value} onValueChange={onChange} disabled={disabled} name={name}>
      <SelectTrigger className="w-full">
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent className="max-h-80">
        {TIMEZONE_OPTIONS.map((group) => (
          <SelectGroup key={group.region}>
            <SelectLabel>{group.region}</SelectLabel>
            {group.zones.map((tz) => (
              <SelectItem key={tz.value} value={tz.value}>
                {tz.label}
              </SelectItem>
            ))}
          </SelectGroup>
        ))}
      </SelectContent>
    </Select>
  );
}