import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../../../lib/utils"

const iconButtonVariants = cva( 
    "hover:bg-accent rounded-full p-2 ",
    {
    variants: {
      variant: {
        default:
          "border border-primary active:scale-95 transition",
       
        outline:
          "border border-accent active:scale-95 transition",

        none:"border border-none active:scale-95 transition "
        
      },
      
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

interface IconProps {
  icon?: React.ReactElement;
}
export interface IconButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof iconButtonVariants>,
    IconProps {
  asChild?: boolean;
}

const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ className, variant, icon, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(iconButtonVariants({ variant, className }))}
        ref={ref}
        {...props}
      >
        {icon && (
          <span className={cn()}>
            {React.cloneElement(icon)}
          </span>
        )}
        {props.children}
      </Comp>
    );
  }
);
IconButton.displayName = "IconButton"

export { IconButton, iconButtonVariants }
