sofa/app/(pages)/titles/[id]/_components/title-actions.tsx

"use client";

import { IconPlayerPlay } from "@tabler/icons-react";
import { useAtomValue } from "jotai";
import { StarRating } from "@/components/star-rating";
import { StatusButton } from "@/components/status-button";
import {
  titleTypeAtom,
  userRatingAtom,
  userStatusAtom,
} from "@/lib/atoms/title";
import { useTitleActions } from "./use-title-actions";

export function TitleActions() {
  const titleType = useAtomValue(titleTypeAtom);
  const userStatus = useAtomValue(userStatusAtom);
  const userRating = useAtomValue(userRatingAtom);
  const { handleStatusChange, handleRating, handleWatchMovie } =
    useTitleActions();

  return (
    <div className="flex flex-wrap items-center gap-3">
      <StatusButton
        currentStatus={userStatus ?? null}
        onChange={handleStatusChange}
      />
      {titleType === "movie" && (
        <button
          type="button"
          onClick={handleWatchMovie}
          className="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all active:scale-[0.97] hover:shadow-md hover:shadow-primary/20"
        >
          <IconPlayerPlay size={14} />
          Mark Watched
        </button>
      )}
      <span className="mx-0.5 h-4 w-px bg-border/50" />
      <StarRating value={userRating ?? 0} onChange={handleRating} />
    </div>
  );
}