---
import { useDict } from '@i18n/t';
import type { Locale } from '@i18n/locales';

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const d = useDict(locale);
---

<button
  data-theme-toggle
  type="button"
  class="border-line text-ink-muted hover:text-ink inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors duration-[--dur-quick]"
  aria-label={d.theme.toLight}
  data-to-light={d.theme.toLight}
  data-to-dark={d.theme.toDark}
>
  {/* Moon (shown in dark) / Sun (shown in light) — swapped by CSS on [data-theme]. */}
  <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linejoin="round"></path>
  </svg>
  <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.6"></circle>
    <path
      d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"></path>
  </svg>
</button>