import {
  Button, Dropdown, MenuProps, Space, Typography,
} from 'antd';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CaretDownOutlined } from '@ant-design/icons';
import { Languages } from 'lucide-react';
import { Icon } from '../ui';

const langs = [
  { code: 'en', label: 'English' },
  { code: 'fr', label: 'French' },
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const handleChangeLanguage = useCallback((lang: string) => {
    i18n.changeLanguage(lang);
    localStorage.setItem('i18nextLng', lang);
  }, []);

  const menuItems: MenuProps['items'] = langs.map((lang) => ({
    key: lang.code,
    label: (
      <div
        key={lang.code}
        className="!py-1 flex items-center gap-2"
      >
        <Typography className="capitalize">
          {lang.label}
        </Typography>
      </div>
    ),
  }));

  return (
    <Dropdown
      menu={{
        items: menuItems,
        selectable: true,
        defaultSelectedKeys: [i18n.language],
        style: {
          maxHeight: 500,
          overflowY: 'auto',
        },
        onClick: (e) => handleChangeLanguage(e.key),
      }}
      placement="bottomLeft"
    >

      <Button>
        <Space>
          <Typography className="font-medium capitalize">

            <div className="flex items-center gap-2">
              <Languages size={12} />
              {i18n.language}
            </div>
          </Typography>
          <CaretDownOutlined rev={undefined} />
        </Space>
      </Button>
    </Dropdown>
  );
}

export default LanguageSwitcher;
