import { useLocation, useNavigate } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';

import style from './../styles/markdown-styles.module.css';

export default function BlogPost() {
  const location = useLocation();
  const navigate = useNavigate();
  const { date, heading, content } = location.state;

  const backTriangle = (
    <svg
      width="30"
      height="38"
      viewBox="0 0 30 38"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M29.2607 33.9621C29.2607 37.1874 25.6396 39.0864 22.9864 37.2527L1.76175 22.5829C-0.53935 20.9925 -0.539164 17.5918 1.7621 16.0016L22.9868 1.3353C25.64 -0.498079 29.2607 1.40104 29.2607 4.62608L29.2607 33.9621Z"
        fill="#7274AB"
      />
    </svg>
  );

  function backNav() {
    navigate('/blog');
  }

  return (
    <div className="bg-white dark:bg-dg-primary-1700 text-dark-gray dark:text-white px-8 md:px-36 flex flex-col items-start justify-center mt-20 w-full max-w-custom m-auto">
      <div
        className="flex mt-8 cursor-pointer justify-center items-center"
        onClick={() => backNav()}
      >
        <div className="mr-4">{backTriangle}</div>
        <h6 className="tracking-widest text-xs uppercase text-dg-secondary font-semibold">
          back
        </h6>
      </div>
      <h1 className="text-4xl text-dark-gray dark:text-white my-2">{heading}</h1>
      <h6 className="text-gray-500 dark:text-gray-300 text-xs mb-8">{date}</h6>
      <ReactMarkdown className={style.reactMarkDown}>{content}</ReactMarkdown>
    </div>
  );
}
