// SPDX-FileCopyrightText: the secureCodeBox authors

//

// SPDX-License-Identifier: Apache-2.0

import clsx from "clsx";

import React, { useState } from "react";

import styles from "../css/flipcard.module.scss";

const FlipCard = ({

title,

description,

imgSrc,

}: {

title: string;

description: string;

imgSrc: string;

}) => {

const [flipped, setFlipped] = useState(false);

return (

<div

onMouseEnter={() => setFlipped(true)}

onMouseLeave={() => setFlipped(false)}

className={clsx(styles.flipcard, { [styles.flipcardFlip]: flipped })}

>

<div className={styles.flipcardInner}>

<div className={styles.flipcardFront}>

<img src={imgSrc} className={styles.flipcardLogo} />

<h4>{title}</h4>

</div>

<div className={clsx(styles.flipcardBack)}>{description}</div>

</div>

</div>

);

};

export default FlipCard;