import React from 'react';
import Button from '../../components/button';
import Input from '../../components/input';
import Tooltip from '../../components/tooltip';

const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
const TooltipStrong = Tooltip(({children, ...other}) => {
  delete other.theme;
  return <strong {...other}>{children}</strong>;
});

const TooltipTest = () => (
  <section>
    <h5>Tooltip</h5>
    <p>Give information on :hover</p>
    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
    <TooltipButton icon='add' floating disabled tooltip='Floating can not be shown' />
    <TooltipButton
      icon='add'
      floating
      tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
    />
    <TooltipInput tooltip='lorem ipsum...' />
    <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
    <p>
      Click this next word to show and hide on click:
      {' '}
      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
        oh hai
      </TooltipStrong>
      {' '}. This is useful for mobile!
    </p>
  </section>
);

export default TooltipTest;