import { Segmented } from 'antd';
import styled from 'styled-components';
import { useLocalStorage } from 'usehooks-ts';
import { LOCALE_KEY } from '../../consts';
import { dynamicActivate, getLocale } from '../../i18n';

const StyledSegmented = styled(Segmented)`
  & label.ant-segmented-item.ant-segmented-item-selected,
  & .ant-segmented-thumb {
    color: white;
    background-color: #001529;
  }

  & .ant-segmented-item {
    transition: #001529 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
`;

export const LanguageSelect = () => {
  const [locale, setLocale] = useLocalStorage(LOCALE_KEY, getLocale());

  return (
    <StyledSegmented
      options={[
        {
          label: 'EN',
          value: 'en',
        },
        {
          label: 'VI',
          value: 'vi',
        },
      ]}
      value={locale}
      onChange={(value: string) => {
        dynamicActivate(value);
        setLocale(value);
      }}
    />
  );
};
