'use client';

import * as React from 'react';

import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
import { ChevronRightIcon } from 'lucide-react';
import { type PlateElementProps, PlateElement } from 'platejs/react';

import { cn } from '@/lib/utils';

export function ToggleElement({
  children,
  ...props
}: PlateElementProps) {
  const element = props.element;
  const state = useToggleButtonState(element.id as string);
  const { buttonProps, open } = useToggleButton(state);

  return (
    <PlateElement {...props} className="relative py-1 pl-6">
      <button
        className={cn(
          'absolute top-1.5 left-0 flex size-6 cursor-pointer select-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
        )}
        contentEditable={false}
        type="button"
        {...buttonProps}
      >
        <ChevronRightIcon
          className={cn(
            'size-4 transition-transform duration-200',
            open && 'rotate-90'
          )}
        />
      </button>
      <div>{children}</div>
    </PlateElement>
  );
}