import React from 'react'
import { Select, Space } from 'antd'
import { GlobalOutlined } from '@ant-design/icons'
import { useLanguageStore } from '../../store/languageStore'
import { languages } from '../../locales'

const { Option } = Select

interface LanguageSelectorProps {
  size?: 'small' | 'middle' | 'large'
  showIcon?: boolean
  style?: React.CSSProperties
}

const LanguageSelector: React.FC<LanguageSelectorProps> = ({ 
  size = 'middle', 
  showIcon = true,
  style 
}) => {
  const { currentLanguage, setLanguage } = useLanguageStore()
  
  return (
    <Select
      value={currentLanguage}
      onChange={setLanguage}
      size={size}
      style={{ minWidth: 140, ...style }}
      suffixIcon={showIcon ? <GlobalOutlined /> : undefined}
    >
      {languages.map(lang => (
        <Option key={lang.code} value={lang.code}>
          <Space size={4}>
            <span>{lang.flag}</span>
            <span>{lang.nativeName}</span>
          </Space>
        </Option>
      ))}
    </Select>
  )
}

export default LanguageSelector