"use client";
import { FilterIcon } from "@/assets/icons";
import Link from "next/link";
import { usePathname } from "next/navigation";
import IsVisible from "./IsVisible";

interface IProps {
  hasCreate?: boolean;
  hasFilter?: boolean;
  createButtonText?: string;
  filterButtonText?: string;
  onFilter?: () => void;
}

const ListHeader = ({
  hasCreate = true,
  hasFilter = true,
  createButtonText = "Create",
  filterButtonText = "Filter",
  onFilter,
}: IProps) => {
  const pathName = usePathname();
  return (
    <div className="flex items-center justify-between">
      <IsVisible condition={hasFilter}>
        <button
          onClick={onFilter}
          className="mb-5 flex w-fit justify-center self-end rounded-2xl border bg-gray-5 bg-opacity-20 px-6 py-2 font-medium transition duration-300 hover:bg-opacity-30 dark:border-gray-7 dark:bg-black dark:bg-opacity-40 dark:text-white dark:hover:bg-opacity-90"
        >
          <span>
            <FilterIcon />
          </span>
          {filterButtonText}
        </button>
      </IsVisible>
      <IsVisible condition={hasCreate}>
        <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
          <Link href={`${pathName}/create`}>{createButtonText}</Link>
        </button>
      </IsVisible>
    </div>
  );
};

export default ListHeader;
