import { Card } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { SystemSettings } from '@/types/system-params'

interface RegionalSettingsCardProps {
  settings: SystemSettings
  onSettingsChange: (updates: Partial<SystemSettings>) => void
}

export function RegionalSettingsCard({ settings, onSettingsChange }: RegionalSettingsCardProps) {
  return (
    <Card className="p-6">
      <h3 className="mb-4">区域与语言</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label>语言</Label>
          <Select
            value={settings.language}
            onValueChange={(value) => onSettingsChange({ language: value })}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="zh-CN">简体中文</SelectItem>
              <SelectItem value="zh-TW">繁體中文</SelectItem>
              <SelectItem value="en-US">English</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>时区</Label>
          <Select
            value={settings.timezone}
            onValueChange={(value) => onSettingsChange({ timezone: value })}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Asia/Shanghai">中国标准时间 (UTC+8)</SelectItem>
              <SelectItem value="Asia/Tokyo">日本标准时间 (UTC+9)</SelectItem>
              <SelectItem value="America/New_York">美国东部时间 (UTC-5)</SelectItem>
              <SelectItem value="Europe/London">格林威治标准时间 (UTC+0)</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>日期格式</Label>
          <Select
            value={settings.dateFormat}
            onValueChange={(value) => onSettingsChange({ dateFormat: value })}
          >
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="YYYY-MM-DD">2024-10-14</SelectItem>
              <SelectItem value="DD/MM/YYYY">14/10/2024</SelectItem>
              <SelectItem value="MM/DD/YYYY">10/14/2024</SelectItem>
              <SelectItem value="YYYY年MM月DD日">2024年10月14日</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </Card>
  )
}