'use client';

import * as React from 'react';
import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import { useOptionalInfobar, type InfobarContent } from '@/components/ui/infobar';
import { cn } from '@/lib/utils';

interface InfoButtonProps extends Omit<React.ComponentProps<typeof Button>, 'content'> {
  content: InfobarContent;
  variant?: 'default' | 'ghost' | 'outline' | 'secondary' | 'destructive' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
}

export function InfoButton({
  content,
  className,
  variant = 'ghost',
  size = 'icon',
  disabled,
  ...props
}: InfoButtonProps) {
  const infobar = useOptionalInfobar();

  // Set content on mount so the infobar has it ready, but don't force it open
  const contentRef = React.useRef(content);
  contentRef.current = content;

  React.useEffect(() => {
    infobar?.setContent(contentRef.current);
  }, [infobar]);

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (infobar) {
      infobar.setContent(content);
      infobar.setOpen(true);
    }
    props.onClick?.(e);
  };

  return (
    <Button
      variant={variant}
      size={size}
      className={cn('shrink-0', className)}
      onClick={handleClick}
      aria-label='Show information'
      disabled={!infobar || disabled}
      {...props}
    >
      <Icons.info className='h-4 w-4' />
      <span className='sr-only'>Show information</span>
    </Button>
  );
}
