
import styles from './Card.module.css';
import { Button } from './components/Button/Button';
import { HashTag } from './components/HashTag/HashTag';

import { typo } from '@utils/typo';

export const Card = ({
    fullname = "Марат Юсупов",
    image_url = "/avatar.png",
    about = "Продуктовый маркетолог в VK",
    date = "09.06",
    title = "Исследования внутри компаний",
    text = "В маркетинге есть большая проблема, о которой мало кто говорит — экспертность специалистов",
    tag = "SC_Sretenka",
    cardId
}) => {
    return (
        <div className={styles.card}>
            <div className={styles.tag}>
                <img src={`/surfing/tags/${tag.toLowerCase()}.svg`}/>
            </div>
            <div className={styles.head}>
                <div 
                    className={styles.avatar}
                    style={{backgroundImage: `url(${image_url})`}}
                />
                <div className={styles.left}>
                    <h2 className={styles.name}>{fullname}</h2>
                    <h3 className={styles.about}>{about}</h3>
                </div>
            </div>
            <h1 className={styles.h1}>{typo(title)}</h1>
            <p className={styles.text}>
                {typo(text)}
            </p>
            <div className={styles.spacer} />

            <Button cardId={cardId} link="https://set.ki/chan_inv/CrvvTgv"/>
        </div>
    )
}