"use client"

import styles from "./index.module.scss";
import { locales } from "@/lib/i18n/config";
import clsx from "clsx";
import { Link, usePathname } from "@/lib/i18n/navigation";
import { useLocale } from "next-intl";

export default async function locale() {
  const pathname = usePathname()
  const currentLocale = useLocale()
  return (
    <div className={styles.content}>
      <div className={styles.center}>
        {locales?.map((item, index) => {
          return (
            <div
              className={clsx(styles.item, {
                active: item.code === currentLocale,
              })}
              key={index}
            >
              <Link href={pathname} locale={item?.code}>
                {item?.nativeName}
              </Link>
            </div>
          );
        })}
      </div>
    </div>
  );
}

.content {
  display: flex;
  gap: 10px;
  color: #000;
  .center {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    .item {
        &:global(.active) {
    color: var(--primary-color);
  }
      &:hover{
        color:var(--primary-color);
      }
    }
  }
}