'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId, useMemo } from 'react';
import { SettingsCard } from './components.js';
const INPUT_CLASS = 'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60';
const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground';
const LANGUAGES = [
    { value: 'en-US', label: 'English (US)' },
    { value: 'en-GB', label: 'English (UK)' },
    { value: 'es-ES', label: 'Spanish (Spain)' },
    { value: 'es-MX', label: 'Spanish (Mexico)' },
    { value: 'fr-FR', label: 'French (France)' },
    { value: 'de-DE', label: 'German (Germany)' },
    { value: 'en', label: 'English' },
];
const TIMEZONES = [
    'UTC',
    'America/New_York',
    'America/Chicago',
    'America/Denver',
    'America/Los_Angeles',
    'America/Anchorage',
    'Europe/London',
    'Europe/Paris',
    'Europe/Berlin',
    'Asia/Tokyo',
    'Asia/Singapore',
    'Australia/Sydney',
];
export function LanguageRegionCard({ form, setField, issues, canEdit }) {
    const langId = useId();
    const tzId = useId();
    const langIssue = issues.find((i) => i.field === 'language');
    const tzIssue = issues.find((i) => i.field === 'timezone');
    // Surface the loaded value even when it isn't one of our presets, so a
    // seeded/config value is never silently dropped from the select.
    const languageOptions = useMemo(() => {
        if (LANGUAGES.some((l) => l.value === form.language))
            return LANGUAGES;
        return [{ value: form.language, label: form.language }, ...LANGUAGES];
    }, [form.language]);
    const timezoneOptions = useMemo(() => {
        if (TIMEZONES.includes(form.timezone))
            return TIMEZONES;
        return [form.timezone, ...TIMEZONES];
    }, [form.timezone]);
    return (_jsx(SettingsCard, { title: "Language & Region", description: "Default language and timezone applied across the admin and public site.", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: langId, className: LABEL_CLASS, children: "Language" }), _jsx("select", { id: langId, value: form.language, disabled: !canEdit, "aria-invalid": Boolean(langIssue), onChange: (e) => setField('language', e.target.value), className: INPUT_CLASS, children: languageOptions.map((l) => (_jsx("option", { value: l.value, children: l.label }, l.value))) }), langIssue && _jsx("p", { className: "text-destructive mt-1 text-sm", children: langIssue.message })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: tzId, className: LABEL_CLASS, children: "Timezone" }), _jsx("select", { id: tzId, value: form.timezone, disabled: !canEdit, "aria-invalid": Boolean(tzIssue), onChange: (e) => setField('timezone', e.target.value), className: INPUT_CLASS, children: timezoneOptions.map((tz) => (_jsx("option", { value: tz, children: tz }, tz))) }), tzIssue ? (_jsx("p", { className: "text-destructive mt-1 text-sm", children: tzIssue.message })) : (_jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Applied to dashboard dates, audit logs, scheduled publishing, and form submissions." }))] })] }) }));
}
//# sourceMappingURL=LanguageRegionCard.js.map