import React, {useState} from 'react';
import {IconChevronDown} from '@tabler/icons-react-native';
import {Button, ButtonSize} from '@components/_HuGo/Button';
import {Menu, MenuProps} from '@components/_HuGo/Menu';

interface Props<TData> extends MenuProps<TData> {
  text: string;
  titleMenu: string;
  buttonVariant?: 'secondary' | 'tertiary';
  buttonSize?: ButtonSize;
}

export function Dropdown<TData extends object>({
  onClose,
  text,
  titleMenu,
  buttonVariant = 'secondary',
  buttonSize = 'sm',
  ...props
}: Props<TData>) {
  const [menuIsVisible, setMenuIsVisible] = useState(false);
  const handleCloseMenu = () => {
    setMenuIsVisible(false);
    onClose?.();
  };

  const handlePress = () => setMenuIsVisible(true);

  return (
    <>
      <Button
        text={text}
        variant={buttonVariant}
        onPress={handlePress}
        IconRight={IconChevronDown}
        size={buttonSize}
      />
      <Menu<TData>
        {...props}
        isVisible={menuIsVisible}
        onClose={handleCloseMenu}
        title={titleMenu}
      />
    </>
  );
}