import {memo,forwardRef} from "react";
import {Avatar, Card, Divider} from "antd";
import {styled} from "styled-components";
import Meta from "antd/es/card/Meta";

const component = forwardRef(({
  title,
  avatarUrl,
  author,
  description,
  extra,
  shape,
  size,
  action,
  ...rest
},ref)=>{
  const defaultUrl = "https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg";

  const MetaDescription = ()=>{
    const i = Math.floor(Math.random() * 20);
    return <>
      {
        author &&
        <MinBox>
          <Avatar size={14} src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`} style={{marginRight:3}}/>
          @{author}
        </MinBox>
      }
      {description && <div style={{color: "black"}}>{description}</div>}
    </>
  }

  return (
    <Card hoverable {...rest}>
      <MetaFree
        avatar={<Avatar shape={shape || "square"} size={size || 52} src={avatarUrl || defaultUrl}/>}
        title={<SpaceBetween>{title}{extra}</SpaceBetween>}
        description={(description || author) ? <MetaDescription/> : null}
      />
      <div>
        {action && <Divider style={{margin: '20px 6px 18px 6px'}}/>}
        {action}
      </div>

    </Card>
  )
})
export const CardMeta = memo(component)


const SpaceBetween = styled.div`
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
`

const MetaFree = styled(Meta)`
  [class*='ant-card-meta-title'] {
    margin-bottom: 0 !important;
  }
`
const MinBox = styled.div`
  display: inline-flex;
  align-items: center;
  font-size: 12px;
`