import React, { useState } from 'react';
import Head from 'next/head';
import Box from '@mui/material/Box';
import TitleBlock from '../src/core/TitleBlock';
import MultiCard from '../src/core/MultiCard';
import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';

import AudioPlayer from 'react-h5-audio-player';

const mass = [
  {
    name: 'Официальный инстаграм-аккаунт КубГАУ',
    link: `https://every-news.com/post/55253518-nacalo-rabocei-nedeli-oznamenovalos-zapuskom-raboty-stab-kvartiry-mediishhika
                      `,
    img: '/Logo_vert1.png',
    imgAlt: 'Официальный инстаграм-аккаунт КубГАУ',
    description: 'КубГАУ - один из признанных лидеров высшего аграрного образования в России, крупнейший в ЮФО центр науки, образования и инноваций'
  },
  {
    name: 'Телеграф новостей',
    link: `https://russiaedu.ru/vuz/23/kubsau/news/nachalo-rabochei-nedeli-oznamenovalos-zapuskom-raboty-shtab-kvartiry-mediishchika-proekta
                      `,
    img: '/russiaedu.svg',
    imgAlt: '«Образование в России» – информационно-образовательный проект от медиагруппы «Телеграф». ',
    description: '«Образование в России» – информационно-образовательный проект от медиагруппы «Телеграф». '
  },
  {
    name: 'EVERY NEWS',
    link: `https://every-news.com/post/55253518-nacalo-rabocei-nedeli-oznamenovalos-zapuskom-raboty-stab-kvartiry-mediishhika
                      `,
    img: '/every.png',
    imgAlt: 'EVERY NEWS',
    description: 'Новости из первых рук'
  }
];

export default function Home() {

  return (
    <div >
      <Head>
        <title>BlogBaster</title>
        <meta name="description" content="Медиа проект по подкастам" />
        <link rel="icon" href="/favicon.png" />
        <link rel="alternate" type="application/rss+xml" title="Podcast"
          href="https://blogbaster.xyz/feed/feed-podcasts/all/index.rss"/>
      </Head>

      <main >
        <Box className={'mainBlock'} id="four">
          <div className={'internalBlock'}>
            <TitleBlock smallText={'Blog Baster'} text={'Подкасты'} />
            <Box className={'grid'}>
            
              <Card className={'MultiCard'}>
                <div className={'img'}>
                  <CardMedia
                    className={'CardMedia'}
                    component="img"
                   />
                </div>
                <div className={'title'}>
                  <Typography variant="body2" gutterBottom>
                    dfdf
                  </Typography>
                </div>
                <div className={''}>
                  <Typography color="text.secondary">
                    qazwsx
                  </Typography>
                </div>
                <AudioPlayer
                  autoPlay
                  className={'description'}
                  src="http://example.com/audio.mp3"
                  onPlay={e => console.log("onPlay")}
                />
              </Card>
              {mass.map((row, count) =>
                <MultiCard name={row.name} link={row.link} img={row.img} imgAlt={row.imgAlt} description={row.description} key={count} />
              )}
            </Box>
          </div>
        </Box>
      </main>
    </div>
  )
}
