---
import type { Locale } from '../../data/site';
import { locales } from '../../data/site';
import { switchLocalePath } from '../../i18n/utils';

interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
---

<div class="">
  {locales.map((loc) => (
    <a
      href={switchLocalePath(Astro.url.pathname, loc)}
      class:list={[
        'btn btn-xs font-medium transition-colors',
        loc === locale
          ? 'bg-secondary text-secondary-content border-secondary'
          : 'btn-ghost text-primary-content/60 hover:text-secondary hover:bg-white/5',
      ]}
      hreflang={loc}
      aria-current={loc === locale ? 'page' : undefined}
    >
      {loc === 'ar' ? 'ع' : 'EN'}
    </a>
  ))}
</div>