import React, { useState } from 'react';
import { useOverlay } from '@/hooks';

export interface TextProps extends Omit<AMap.TextOptions, 'style'> {
  textStyle?: AMap.TextStyleOptions;
  visible?: boolean;
  events?: any;
}

export const Text: React.FC<TextProps> = ({
  children,
  visible,
  events,
  textStyle,
  ...options
}) => {
  const [text] = useState<AMap.Text>(
    () => new AMap.Text({ style: textStyle, ...options }),
  );

  useOverlay(text, visible, events, { ...options, style: textStyle }, [
    'text',
    'style',
    'title',
    'clickable',
    'draggable',
    'position',
    'anchor',
    'angle',
    'zIndex',
    'offset',
    'cursor',
    'extData',
  ]);

  return null;
};