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

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

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

export default BsCard;