"use client";

import clsx from "clsx";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useT } from "@/context/translation-map";

interface ListHeaderProps {
  title: React.ReactElement<any> | string;
  link?: string;
  container?: boolean;
  marginBottom?: boolean;
  extra?: React.ReactElement<any>;
}

export const ListHeader = ({
  title,
  link,
  container,
  extra,
  marginBottom = true,
}: ListHeaderProps) => {
  const t = useT();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <div
      className={clsx(
        "flex items-center justify-between",
        container && "xl:container px-4",
        marginBottom && "mb-4"
      )}
    >
      <div className={clsx("flex items-center gap-3")}>
        <span className={clsx("md:text-head text-xl font-semibold")} suppressHydrationWarning>
          {mounted ? title : "\u00A0"}
        </span>
        {extra}
      </div>
      {!!link && (
        <Link href={link} className="md:text-xl text-sm font-medium " suppressHydrationWarning>
          {mounted ? t("see.all") : "\u00A0"}
        </Link>
      )}
    </div>
  );
};