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

export interface PopoverContentProps {
  children: React.ReactNode;
  id: string;
  anchorName: string; // Must include `--` like "--menu-anchor"
  popover?: 'auto' | 'hint' | 'manual';
  position?:
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';
  className?: string;
}

const positionAreaMap: Record<
  NonNullable<PopoverContentProps['position']>,
  string
> = {
  top: 'top center',
  bottom: 'bottom center',
  left: 'left center',
  right: 'right center',

  'top-start': 'top left',
  'top-end': 'top right',
  'bottom-start': 'bottom left',
  'bottom-end': 'bottom right',

  'left-start': 'left top',
  'left-end': 'left bottom',

  'right-start': 'right top',
  'right-end': 'right bottom',
};

const PopoverContent = ({
  children,
  id,
  anchorName,
  popover = 'auto',
  position = 'bottom-start',
  className,
}: PopoverContentProps) => {
  return (
    <div
      className={cn(className)}
      id={id}
      popover={popover}
      style={
        {
          inset: 'unset',
          positionAnchor: anchorName,
          positionArea: positionAreaMap[position],
        } as React.CSSProperties
      }
    >
      {children}
    </div>
  );
};

export default PopoverContent;
