"use client";

import { type VariantProps } from "class-variance-authority";
import { forwardRef, useState } from "react";

import { cn } from "@/libs/utils";

import type { LIconProps } from "../lucid-icon/lucid-icon";
import LIcon from "../lucid-icon/lucid-icon";
import styles from "./badge.module.css";
import badgeVariants from "./badge.variants";

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  leftIcon?: LIconProps;
  rightIcon?: LIconProps;
  childrenClassName?: string;
  closable?: boolean;
  closeIconPosition?: "left" | "right";
  onClose?: () => void;
}

function InternalBadge(
  {
    className,
    childrenClassName,
    variant,
    size,
    children,
    leftIcon,
    rightIcon,
    closable,
    onClose,
    closeIconPosition,
    ...props
  }: BadgeProps = {
    closeIconPosition: "right",
  },
) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  const handleOnClose = () => {
    setVisible(false);
    if (onClose) onClose();
  };

  return (
    <div
      className={cn(
        badgeVariants({ variant, size }),
        className,
        (leftIcon || (closable && closeIconPosition === "left")) &&
          styles.leftIcon,
        (rightIcon || (closable && closeIconPosition === "right")) &&
          styles.rightIcon,
      )}
      {...props}
    >
      {closable && closeIconPosition === "left" && (
        <LIcon
          name="X"
          className={styles.close}
          onClick={handleOnClose}
          size={12}
        />
      )}
      {leftIcon && <LIcon size={12} {...leftIcon} />}
      <span className={cn(childrenClassName, "select-none")}>{children}</span>
      {rightIcon && <LIcon size={12} {...rightIcon} />}
      {closable && closeIconPosition === "right" && (
        <LIcon
          name="X"
          className={styles.close}
          onClick={handleOnClose}
          size={12}
        />
      )}
    </div>
  );
}

const Badge = forwardRef<HTMLDivElement, BadgeProps>(InternalBadge);
export { Badge, badgeVariants };