import styles from './index.module.css';
import { Link } from 'react-router-dom';
type Data = {
    title: string;
    content: string;
    backgroundImage: string;
    path: string;
    moreText: string;
}

export default function AnimateTopCard({ data }: { data: Data }) {
    return (
        <div className={styles.card} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
           <div className={styles.cardMask}></div>
              <div className={styles.cardInner}>
                <div className={styles.cardTitle}><span>{data.title}</span></div>
                <div className={styles.cardTitleUnderline}></div>
                <div className={styles.cardContent}>
                    <div>{data.content}</div>
                    <Link to={data.path} className={styles.cardMore}>{data.moreText}</Link>
                </div>
              </div>
        </div>
    );
}