import React from 'react';
import {Button, Card, Col, Row} from 'react-bootstrap';
import {getCardContent} from "./contentCard";

const CardExtended = ({item, selectHandle}) => {
    const cc = getCardContent(item);
    return (
        <Card className="mb-3" style={{width: '100%'}} onClick={() => selectHandle(item)}>
            <Row>
                <Col md={3}>
                    <Card.Img variant="top" src={cc.image} style={{marginTop: '1rem'}}/>
                </Col>
                <Col md={9}>
                    <Card.Body>
                        <Card.Title>{item.title}</Card.Title>
                        <Card.Text>
                            <strong>Год:</strong> {item.year}<br/>
                            <strong>Рейтинг:</strong> {cc.rating}<br/>
                            {item.overview}
                        </Card.Text>
                    </Card.Body>
                </Col>
            </Row>
            <Row>
                <Col style={{justifyContent: 'end'}}>
                    <Button variant={'outline-primary'} disabled title={"Download"}>{item.serial ? "Сериал" : "Фильм"}</Button>
                </Col>
            </Row>
        </Card>
    );
};

export default CardExtended;