"use client"

import { Tip } from "./tip"
import { Toggle } from "./toggle"
import { cn } from "../../lib/utils"

/** Parent must use this class so a non-favorited star reveals on row/cell hover. */
export const FAVORITE_HOVER_GROUP = "group/favcell"

/**
 * Row-shape-agnostic favorite star toggle — one implementation shared by
 * every table that has a `favoriteFilter` name/title column.
 */
export function FavoriteToggleButton({
  isFavorite,
  onToggle,
  label,
  stopPropagation = true,
}: {
  isFavorite: boolean
  onToggle: () => void
  /** Item name folded into the accessible label ("Remove <label> from favorites"). Omit for a generic label. */
  label?: string
  stopPropagation?: boolean
}) {
  const suffix = label ? ` ${label}` : ""
  const tip = isFavorite ? `Remove${suffix} from favorites` : `Add${suffix} to favorites`
  return (
    <Tip side="top" label={tip}>
      <Toggle
        type="button"
        size="sm"
        variant="bare"
        pressed={isFavorite}
        aria-label={tip}
        className={cn(
          "shrink-0 rounded-md transition-opacity duration-150",
          isFavorite
            ? "text-amber-600 opacity-100 hover:bg-amber-500/15 hover:text-amber-700"
            : "text-muted-foreground opacity-0 hover:bg-muted hover:text-amber-600 group-hover/favcell:opacity-100 focus-visible:opacity-100",
        )}
        onClick={e => {
          if (stopPropagation) e.stopPropagation()
        }}
        onPressedChange={() => {
          onToggle()
        }}
      >
        <i className={cn("text-sm", isFavorite ? "fa-solid fa-star" : "fa-light fa-star")} aria-hidden />
      </Toggle>
    </Tip>
  )
}