import React from 'react';
import avatar from './assets/Subtract.png';
import { Card } from './index.styled';
import ButtonComponent from '../button';
import ImageComponent from '../ImageComponent';

/**
 * @param {{
 *  onClick: function,
 *  style: CSSProperties,
 * }} props - properties of graph Component
 *
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const SuccessCard = (props) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Card style={props.style}>
      <div className="img_wrap">
        <ImageComponent
          src={props.image || avatar}
          width="150px"
          height="185px"
          alt={findText("Partying Face")}
          style={{
            objectFit: "contain",
          }}
        />
      </div>
      <h1>{props.title} </h1>
      <h2>{props.subtitle} </h2>
      <h6> {props.info} </h6>

      <ButtonComponent
        text={props.text}
        styles={{
          marginLeft: findText("auto"),
          marginRight: findText("auto"),
        }}
        onClick={props.onClick}
      />
    </Card>
  );
};
export default SuccessCard;
