import Icon from "components/Icon";
import Link from "next/link";
import styles from "styles/Posts.module.sass";
import { useTheme } from "next-themes";
import Date from "./Date";

const Post = ({ title, date, tag, slug }) => {
  const { resolvedTheme: theme } = useTheme();

  return (
    <>
      <Link href={`/blog/${slug}`}>
        <a className={styles.link}>
          <div data-theme={theme} className={styles.post}>
            <div className={styles.title_date}>
              <p className={styles.title}>{title}</p>
              <p className={styles.date}>
                <Date dateString={date} />
              </p>
            </div>
            {tag ? (
              <p data-theme={theme} className={styles.tag}>
                {tag}
              </p>
            ) : undefined}
          </div>
        </a>
      </Link>
    </>
  );
};

export default Post;

{
  /* <Link href={props.url}> */
}
{
  /* <a> */
}
{
  /* <div data-theme={theme} className={styles.button}> */
}
{
  /* <Icon className={styles.icon} icon={props.icon} /> */
}
{
  /* <div className={styles.platform_username}> */
}
{
  /* <p className={styles.platform}>{props.platform}</p> */
}
{
  /* <p className={styles.username}> {props.username} </p> */
}
{
  /* </div> */
}
{
  /* <Icon className={styles.link} icon="arrow-up-right" /> */
}
{
  /* </div> */
}
{
  /* </a> */
}
{
  /* </Link> */
}