import { Card, Carousel, Image, Space } from "antd";
import Meta from "antd/lib/card/Meta";
import Title from "antd/lib/skeleton/Title";
import React from "react";
const contentStyle: React.CSSProperties = {
  height: "320px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
};

interface DisplayCards{
  title: string;
  altitle: string;
  image: string
}

//example
export const cardsDataExample: DisplayCards[] =[
  {title: "Cars", altitle: "Auta", image: "https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"},
  {title: "Monster House", altitle: "V tom domě straší", image:"https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg"},
  {title: "Pokemon", altitle: "Pokémon", image:"https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg"},
  {title: "The Can", altitle: "Gympl", image:"https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg"},
  {title: "Toy Story", altitle: "Příběh hraček", image:"https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg"},
  {title: "Smoke", altitle: "Kouř", image: "https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg"},
  ]

const Preview: React.FC = () => (
  <div>
    <h1>Popular movies</h1>
    <Space>
      
      {cardsDataExample.map((movie) => {
      return (
      <>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt={movie.title}
            src={movie.image}
          />
        }
      >
      <Meta title={movie.title} description={movie.altitle} />
      </Card>
      </>)
      })}

    </Space>
    
    <Carousel autoplay>
      <div>
        <h3 style={contentStyle}>Avengers</h3>
      </div>
      <div>
        <h3 style={contentStyle}>Morbius</h3>
      </div>
      <div>
        <h3 style={contentStyle}>Princezna a Bubeník</h3>
      </div>
      <div>
        <h3 style={contentStyle}>Scary Movie</h3>
      </div>
      <div>
        <h3 style={contentStyle}>Scary Movie 2</h3>
      </div>
      <div>
        <h3 style={contentStyle}>Scary Movie 3</h3>
      </div>
    </Carousel>
  </div>
);

export default Preview;