import Image from "next/image"

import type { CookiesStore } from "@/utils/constants"
import { useI18n } from "@/i18n/i18n.client"

export interface LocaleFlagProps {
  locale: string
  cookiesStore: CookiesStore
}

export const LocaleFlag = (props: LocaleFlagProps): JSX.Element => {
  const { locale, cookiesStore } = props

  const i18n = useI18n(cookiesStore)

  return (
    <>
      <Image
        quality={100}
        width={35}
        height={35}
        src={`/images/locales/${locale}.svg`}
        alt={locale}
      />
      <p data-cy="locale-flag-text" className="mx-2 text-base">
        {i18n.translate(`common.${locale}`)}
      </p>
    </>
  )
}