"use client";
import { FilterIcon } from "@/assets/icons";
import { Button } from "@/components/ui-elements/button";
import { usePathname, useRouter } from "next/navigation";
import IsVisible from "./IsVisible";

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

const ListHeader = ({
  hasCreate = true,
  hasFilter = true,
  createButtonText = "Create",
  filterButtonText = "Filter",
  onFilter,
  dataCyPrefix = "list-header",
}: IProps) => {
  const pathName = usePathname();
  const router = useRouter();

  const rowJustify =
    hasFilter && hasCreate
      ? "justify-between"
      : hasCreate && !hasFilter
        ? "justify-center md:justify-end"
        : "justify-start";

  return (
    <div
      className={`mb-1 flex flex-col-reverse items-center gap-3 md:flex-row ${rowJustify}`}
    >
      <IsVisible condition={hasFilter}>
        <Button
          label={filterButtonText}
          icon={
            <span className="text-primary">
              <FilterIcon />
            </span>
          }
          variant="outlineDark"
          shape="rounded"
          size="small"
          onClick={onFilter}
          data-cy={`${dataCyPrefix}-filter-button`}
          className="shadow-theme-xs mb-5 self-end rounded-xl border-stroke/70 bg-white/80 px-5 text-sm font-semibold text-dark transition-all duration-300 hover:border-primary/35 hover:text-primary dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:hover:bg-white/[0.08]"
        />
      </IsVisible>
      <IsVisible condition={hasCreate}>
        <Button
          label={createButtonText}
          variant="primary"
          shape="rounded"
          size="small"
          onClick={() => router.push(`${pathName}/create`)}
          data-cy={`${dataCyPrefix}-create-button`}
          className="shadow-theme-xs mb-5 self-end rounded-xl bg-gradient-to-r from-primary to-primary/85 text-sm font-semibold transition-all duration-300 hover:opacity-95"
        />
      </IsVisible>
    </div>
  );
};

export default ListHeader;
