import styles from "./Card.module.css";
import clock from "../../../../../public/imgaes/clock.svg";
import Image from "next/image";
import Link from "next/link";
function Card({
  imgUrl,
  cardTitle,
  cardDescription,
  authorName,
  postedDate,
  readTime,
}: any) {
  return (
    <Link href={"/"} className={styles.customLink}>
      <article className={styles.card}>
        <img
          className={styles["card-avatar"]}
          src={imgUrl}
          alt="Author photo"
        />
        <section className={styles["card-content"]}>
          <h3 className={styles["card-title"]}>{cardTitle}</h3>
          <p className={styles["card-description"]}>{cardDescription}</p>
        </section>
        <footer className={styles["card-footer"]}>
          <div className={styles["author-details"]}>
            <div>
              <img
                src="https://picsum.photos/55/55"
                alt="Author photo"
                className={styles["author-avatar"]}
              />
            </div>
            <div className="author-info">
              <div className={styles["author-name"]}>{authorName}</div>
              <div className={styles["post-info"]}>
                <div>{postedDate}.</div>
                <div className={styles.readtimeWrapper}>
                  <Image width={20} src={clock} alt="img" />
                  {readTime} min
                </div>
              </div>
            </div>
          </div>
        </footer>
      </article>
    </Link>
  );
}

export default Card;
