import React from "react";
import { CCCard } from "../";
import styles from "./CardGroup.module.scss";
import { Link } from "react-router-dom";

export const CardGroup = () => {
  return (
    <div className={styles.cards}>
      <Link to="/guides">
        <div className={styles.card}>
          <h2 className={styles.cardHeading}>Guides</h2>
          <CCCard
            description="Latest material for faceshields"
            img="assets/Guides.jpeg"
          />
        </div>
      </Link>
      <Link to="/trends">
        <div className={styles.card}>
          <h2 className={styles.cardHeading}>Trends</h2>
          <CCCard
            description="This is a featured story"
            img="assets/Trends.jpeg"
          />
        </div>
      </Link>
      <Link to="/news">
        <div className={styles.card}>
          <h2 className={styles.cardHeading}>News</h2>
          <CCCard
            description="This is a featured news"
            img="assets/News.jpeg"
          />
        </div>
      </Link>
    </div>
  );
};
