import React from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { spacing, borderRadius, animation, sizing } from '../../theme';

export const LanguageSwitcher: React.FC = () => {
  const { i18n } = useTranslation();

  const currentLang = i18n.language?.startsWith('ro') ? 'ro' : 'en';

  const handleToggle = () => {
    const next = currentLang === 'en' ? 'ro' : 'en';
    i18n.changeLanguage(next);
  };

  return (
    <SwitchButton
      onClick={handleToggle}
      aria-label={`Switch language to ${currentLang === 'en' ? 'Romanian' : 'English'}`}
      title={currentLang === 'en' ? 'Switch to Romanian' : 'Switch to English'}
    >
      <LangCode>{currentLang.toUpperCase()}</LangCode>
    </SwitchButton>
  );
};

const SwitchButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: ${sizing.button.lg}px;
  height: ${sizing.button.lg}px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: ${borderRadius.md}px;
  cursor: pointer;
  color: var(--fg-primary);
  transition: all ${animation.duration.normal} ${animation.easing.default};

  &:hover {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
    transform: translateY(-2px);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 145, 152, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
`;

const LangCode = styled.span`
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  user-select: none;
`;