import { format, parseISO } from 'date-fns';
import { GetStaticProps } from 'next';
import Link from 'next/link';
import Layout from '../components/Layout';
import { getAllPosts } from '../lib/api';
import { PostType } from '../types/post';
import { BlockHead } from '../components/UX/index'

type IndexProps = {
  posts: PostType[];
};

export const Index = ({ posts }: IndexProps): JSX.Element => {
  return (
    <Layout>
      <BlockHead>
        <span>
          <h1>Городские соревнования по робототехнике</h1>
          <p>РоботТоп – это робототехнические соревнования, в которых могут принять участие молодые любители робототехники</p>
          <ul className="list-disc pl-4 my-6">
            <li className="mt-2"><b>Дата проведения </b> 27 мая 2023 года</li>
            <li className="mt-2"><b>Место проведения </b>
              <Link href={'https://go.2gis.com/sf40j'} target="_blank"> г. Краснодар ул. Байбакова 17 (МАОУ СОШ 103)</Link>
            </li>
            <li className="mt-2">Любая робототехническая платформа</li>
            <li className="mt-2">Команда 2 человека</li>
            <li className="mt-2">Три возрастных группы</li>
            <li className="mt-2">Свобода в творчестве</li>
          </ul>
          <Link href={'/competition/[slug]'} as={'/competition/regulations'}>
            <a className="buttonMargin inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white"
            > Регламент соревнований </a>
          </Link> 

          <Link href={`competition/registration`}>
            <a className="buttonMargin inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white" > Регистрация команды  </a>
          </Link>
          <Link href={`/competition_pub/сompetition_regulations_school_94.pdf`}>
            <a className="buttonMargin inline-block px-7 py-3 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white" > Положение о соревнованиях </a>
          </Link>
        </span>
      </BlockHead>
      <h2 className='mt_30'>Блог</h2>
      {posts.map((post) => (
        <article key={post.slug} className="mt-12">
          <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
            {format(parseISO(post.date), 'MMMM dd, yyyy')}
          </p>
          <h1 className="mb-2 text-xl">
            <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
              <a className="text-gray-900 dark:text-white dark:hover:text-blue-400">
                {post.title}
              </a>
            </Link>
          </h1>
          <p className="mb-3">{post.description}</p>
          <p>
            <Link as={`/posts/${post.slug}`} href={`/posts/[slug]`}>
              <a>Подробнее...</a>
            </Link>
          </p>
        </article>
      ))}
    </Layout>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const posts = getAllPosts(['date', 'description', 'slug', 'title']);

  return {
    props: { posts },
  };
};

export default Index;