import type { ClickableProps } from '~/src/components/Clickable';
import type { FC } from 'react';

import Clickable from '~/src/components/Clickable';
import Text from '~/src/components/Text';
import useTheme from '~/src/hooks/useTheme';

const RemoveButton: FC<{ text: string } & Omit<ClickableProps, 'children'>> = ({
  text,
  ...clickableProps
}) => {
  const theme = useTheme();

  return (
    <Clickable isInline {...clickableProps}>
      <Text color={theme.colorDanger} size="1.6rem">
        {text}
      </Text>
    </Clickable>
  );
};

export default RemoveButton;