import { Card } from "@arco-design/web-react";
import { MouseEventHandler } from "react";
import "./index.less";
const { Meta } = Card;

interface IProps {
  imgUrl: string;
  title: string;
  meta?: {
    desc?: string;
    action?: string;
  };
  styles?: {};
  onClick?: MouseEventHandler;
}

function BsCard(props: IProps) {
  const { imgUrl, title, meta, styles, ...rest } = props;
  return meta ? (
    <Card
      {...rest}
      className="bs-card"
      hoverable
      style={{ ...styles }}
      cover={
        <div
          className="cover"
          style={{
            backgroundImage: `url('${imgUrl}')`,
          }}
        >
          <div className="mask">
            <p>{title}</p>
          </div>
        </div>
      }
    >
      <Meta
        description={
          <div className="bottom-des">
            <span className="bs-ellipsis">{meta?.desc}</span>
            <a>{meta?.action}</a>
          </div>
        }
      />
    </Card>
  ) : (
    <Card {...rest} className="bs-card mini" hoverable style={{ ...styles }}>
      <div
        className="cover"
        style={{
          backgroundImage: `url('${imgUrl}')`,
        }}
      >
        <div className="mask">
          <p>{title}</p>
        </div>
      </div>
    </Card>
  );
}

export default BsCard;
