import { Badge, ListItem, ListItemPrefix } from "@material-tailwind/react";
import React from "react";

import useCustomRouter from "../hooks/useCustomRouter";
import CustomNextLink from "./CustomNextLink";

export type ListItemComponentProps = {
  href?: string;
  prefix: any;
  suffix?: any;
  ListItemName: string;
  active: boolean;
  target?: string;
  onClick?: () => void;
  cartProductsCount: number | React.JSX.Element;
  customAction?: () => void;
  customActionEnable?: boolean;
};

export default function ListItemComponent({
  href,
  prefix,
  ListItemName,
  active,
  target = "_self",
  onClick,
  cartProductsCount,
  customAction = () => {},
  customActionEnable = false,
}: ListItemComponentProps) {
  //
  const { push } = useCustomRouter();

  return (
    <ListItem
      className={`relative p-3 lg:p-2.5 xl:p-3 text-slate-600 rounded-lg
        hover:text-purple-500 hover:bg-purple-100 
        focus:text-purple-500 focus:bg-purple-200
        active:text-purple-500 active:bg-purple-50 
        ${active ? "text-purple-500 bg-purple-100" : ""}
        focus:outline-none focus:ring-0`}
      onClick={() => {
        if (customActionEnable) {
          customAction();
        } else {
          target != "_blank" && push(href);
        }
      }}
    >
      {customActionEnable ? (
        <div className="w-fit mr-12 items-center text-base font-medium md:font-normal">
          <div className="flex items-center gap-2">
            {prefix && (
              <ListItemPrefix className="m-0 w-fit">{prefix}</ListItemPrefix>
            )}
            {ListItemName}
          </div>
        </div>
      ) : (
        <CustomNextLink
          href={href}
          className="flex justify-between items-center w-full text-base font-medium md:font-normal"
          target={target}
          onClick={onClick}
        >
          <div className="flex items-center gap-2">
            {prefix && (
              <ListItemPrefix className="m-0">{prefix}</ListItemPrefix>
            )}
            {ListItemName}
          </div>
        </CustomNextLink>
      )}
      {!!cartProductsCount && (
        <Badge
          content={cartProductsCount}
          className="min-h-fit text-[0.625rem] px-1.5 right-1 rounded-xl leading-normal bg-blue-300 text-white"
        ></Badge>
      )}
    </ListItem>
  );
}
