"use client";
import React, { FC, ReactNode } from "react";
import styles from "@/styles/Component/ChooseUs/ChooseUsCard.module.scss";
import { Figure, Image } from "react-bootstrap";

interface ChooseUsCardProps {
  heading?: ReactNode;
  paragraph?: ReactNode;
  number?: ReactNode;
}

const ChooseUsCard: FC<ChooseUsCardProps> = ({
  heading,
  paragraph,
  number
}) => {
  return (
    <div className={styles.ChooseUsCardBlock}>
      {number && <span className={styles.ChooseUsCardNumber}>{number}</span>}
      <Figure>
        <Image src="../assets/right-tick.png" alt="right-tick" />
      </Figure>
      <div className={styles.ChooseUsCardBlockInfo}>
        {heading && <h6>{heading}</h6>}
        {paragraph && <p>{paragraph}</p>}
      </div>
    </div>
  );
};

export default ChooseUsCard;