"use client";

import { cn } from "@buildingai/ui/lib/utils";
import {
  Caption as CaptionPrimitive,
  CaptionTextarea as CaptionTextareaPrimitive,
  useCaptionButton,
  useCaptionButtonState,
} from "@platejs/caption/react";
import { createPrimitiveComponent } from "@udecode/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import * as React from "react";

import { Button } from "../../ui/button";

const captionVariants = cva("max-w-full", {
  defaultVariants: {
    align: "center",
  },
  variants: {
    align: {
      center: "mx-auto",
      left: "mr-auto",
      right: "ml-auto",
    },
  },
});

export function Caption({
  align,
  className,
  ...props
}: React.ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>) {
  return <CaptionPrimitive {...props} className={cn(captionVariants({ align }), className)} />;
}

export function CaptionTextarea(props: React.ComponentProps<typeof CaptionTextareaPrimitive>) {
  return (
    <CaptionTextareaPrimitive
      {...props}
      className={cn(
        "mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit",
        "focus:outline-none focus:[&::placeholder]:opacity-0",
        "text-center print:placeholder:text-transparent",
        props.className,
      )}
    />
  );
}

export const CaptionButton: React.FC<React.ComponentProps<typeof Button>> =
  createPrimitiveComponent(Button)({
    propsHook: useCaptionButton,
    stateHook: useCaptionButtonState,
  });
