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

const Preview: React.FC = () => (
  <div>
    <Space>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Cars"
            src="https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"
          />
        }
      >
        <Meta title="Cars" description="Auta" />
      </Card>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Monster House"
            src="https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg"
          />
        }
      >
        <Meta title="Monster house" description="V tom domě straší" />
      </Card>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Pokemon"
            src="https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg"
          />
        }
      >
        <Meta title="Pokemon 3" description="Pokémon 3" />
      </Card>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Gympl"
            src="https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg"
          />
        }
      >
        <Meta title="The Can" description="Gympl" />
      </Card>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Toy Story"
            src="https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg"
          />
        }
      >
        <Meta title="Toy Story" description="www.instagram.com" />
      </Card>
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt="Kour"
            src="https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg"
          />
        }
      >
        <Meta title="Smoke" description="Kouř" />
      </Card>
    </Space>

    <Carousel autoplay>
      <div>
        <h3 style={contentStyle}>Avengers: Infinity War</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;