import React, { useState } from 'react'
import { Badge, Link, Button } from 'react-icecream'
import { AddThinIcon } from 'react-icecream/icons'

import { Gap, Squire, Circle } from './shapes'

export default function Demo() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <div style={{ marginBottom: 24 }}>
        <Button type="primary" onClick={() => setVisible(!visible)}>隐藏/展示 Badge</Button>
      </div>
      <Badge visible={visible} ><Squire /></Badge>
      <Gap />
      <Badge visible={visible} count={0}> <Squire /> </Badge>
      <Gap />
      <Badge visible={visible} count={1001} overflowCount={999}> <Squire /> </Badge>
      <Gap />
      <Badge visible={visible}> <Circle /> </Badge>
      <Gap />
      <Badge visible={visible}> <AddThinIcon style={{ fontSize: '20' }} /> </Badge>
      <Gap />
      <Badge visible={visible}> <Link href="/">文字链接</Link> </Badge>
    </>
  )
}