import React, { PropsWithChildren } from 'react'

import { Card, CardTitle, Link, Paragraph, Tooltip } from 'react-icecream'
import { CloseIcon, HelpIcon } from 'react-icecream/icons'

export default function Demo() {
  return (
    <Card type="bordered" title={<CardTitle title="标题" bordered={false} />}>
      <div style={{ display: 'flex', flexWrap: 'wrap', margin: '-6px' }}>
        <Card type="bordered" title={<CardTitle title="卡片标题" extra={<ClickEasy><CloseIcon /></ClickEasy>} />} size="small" style={{ minWidth: '280px', margin: '6px' }}>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
        </Card>
        <Card type="bordered" size="small" title={<CardTitle title="卡片标题" extra={<Tooltip title="帮助文档"><HelpIcon /></Tooltip>} />} style={{ minWidth: '280px', margin: '6px' }}>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
        </Card>
        <Card size="small" title={<CardTitle title="卡片标题(小)" extra={<Link href="#">查看更多</Link>} />} type="bordered" style={{ minWidth: '280px', margin: '6px' }}>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
        </Card>
        <Card size="small" title="卡片标题(小)" type="bordered" style={{ minWidth: '280px', margin: '6px' }}>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
          <Paragraph>卡片内容</Paragraph>
        </Card>
      </div>
    </Card>
  )
}

// 演示如果是 x 号如何增加热区大小
function ClickEasy({ children }: PropsWithChildren<{}>) {
  return (
    <div onClick={() => console.log('closed')} style={{ position: 'absolute', right: '-10px', display: 'flex', padding: '10px' }}>{children}</div>
  )
}