HeroUI Toggle Button

"use client"

import { Heart } from "lucide-react"
import { useState } from "react"
import { ToggleButton } from "@/components/ui/heroui-toggle-button"

export default function Controlled() {
  const [isSelected, setIsSelected] = useState(false)

  return (
    <div className="flex flex-col gap-4">
      <ToggleButton isSelected={isSelected} onChange={setIsSelected}>
        {({ isSelected: selected }) => (
          <>
            {selected ? <Heart fill="currentColor" /> : <Heart />}
            {selected ? "Liked" : "Like"}
          </>
        )}
      </ToggleButton>
      <p className="text-sm text-muted">
        Status:{" "}
        <span className="font-medium">
          {isSelected ? "Selected" : "Not selected"}
        </span>
      </p>
    </div>
  )
}