"use client";

import { RootState } from "@/store/store";
import { useTranslations } from "next-intl";
import { useSelector } from "react-redux";

export default function ProductsHeader({
  category_id,
  sort,
}: {
  category_id: string;
  sort?: string;
}) {
  const t = useTranslations();
  const { allCategoriesItems: categories } = useSelector(
    (state: RootState) => state.CategoriesConfig,
  );
  const category = categories?.find((ele) => ele.id == category_id);
  if (!category && !sort) return null;
  return (
    <>
      <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full mb-4 shadow-sm">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-sparkles text-primary"
        >
          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
          <path d="M20 3v4"></path>
          <path d="M22 5h-4"></path>
          <path d="M4 17v2"></path>
          <path d="M5 18H3"></path>
        </svg>
        <span className="text-sm">{category?.name || t(`Text.${sort}`)}</span>
      </div>
      <h1 className="text-3xl md:text-4xl mb-4 text-text-primary">
        {category?.name || t(`Text.${sort}`)}
      </h1>
    </>
  );
}