Icon Button

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { motion, useReducedMotion } from "motion/react"
import {
  IconButton,
  IconButtonParticles,
} from "@animate-ui/react/primitives/buttons/icon"
import { FavouriteIcon } from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

const iconButtonVariants = cva(
  "focus-visible:border-ring focus-visible:ring-ring/50 inline-flex shrink-0 items-center justify-center rounded-lg transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        accent: "bg-accent text-accent-foreground hover:bg-accent/90",
        outline:
          "bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
      },
      size: {
        default: "size-9",
        sm: "size-8",
        lg: "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export default function IconButtonDemo({
  variant = "outline",
  size = "default",
}: VariantProps<typeof iconButtonVariants>) {
  const [liked, setLiked] = React.useState(false)
  const reduce = useReducedMotion()

  return (
    <IconButton
      aria-label="Like"
      aria-pressed={liked}
      onClick={() => setLiked((value) => !value)}
      className={cn(iconButtonVariants({ variant, size }))}
    >
      <motion.span
        className="inline-flex"
        initial={false}
        animate={{ scale: reduce ? 1 : liked ? [1, 1.3, 1] : [1, 0.85, 1] }}
        transition={{
          duration: 0.4,
          times: [0, 0.4, 1],
          ease: ["easeOut", [0.34, 1.56, 0.64, 1]],
        }}
      >
        <HugeiconsIcon
          icon={FavouriteIcon}
          strokeWidth={2}
          className={cn(
            "fill-transparent transition-[fill,color] duration-200 ease-out",
            liked && "fill-red-500 text-red-500"
          )}
        />
      </motion.span>
      {liked && <IconButtonParticles className="text-red-500" />}
    </IconButton>
  )
}