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 }) => {
  const { resolvedTheme: theme } = useTheme();

  return (
    <>
      <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>
    </>
  );
};

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> */
}