"use client";
// A hosted room card's favorite star and rating buttons.
import { Star } from "lucide-react";
import { ActionForm, SubmitButton } from "@/components/forms";
import { cn } from "@/lib/utils";
import { rateRoom, setFavorite } from "./actions";

export function RoomActions({ n, favorite, canRate }: { n: number; favorite: boolean; canRate: boolean }) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ActionForm action={setFavorite} fields={{ n, favorite: favorite ? "0" : "1" }} className="space-y-0">
        <SubmitButton variant="ghost" size="icon" aria-label={favorite ? "Unstar" : "Star"} title={favorite ? "Unstar" : "Star"}>
          <Star className={cn("size-4", favorite && "fill-current text-amber-500")} />
        </SubmitButton>
      </ActionForm>
      {canRate && (
        <ActionForm action={rateRoom} fields={{ n }} className="flex items-center gap-0.5 space-y-0">
          <span className="mr-1 text-xs text-muted-foreground">Rate</span>
          {[1, 2, 3, 4, 5].map((k) => (
            <SubmitButton key={k} name="score" value={String(k)} variant="ghost" size="xs" aria-label={`${k} of 5`}>
              {k}
            </SubmitButton>
          ))}
        </ActionForm>
      )}
    </div>
  );
}