import React, { Fragment } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import _ from "lodash"
import Ar from "lodash/array"
import VideoVimeo from '../atoms/VideoVimeo'

const useStyles = makeStyles(theme => ({
    card: {
        width: '100%',
    },
    title: {
        fontSize: '1em',
        fontWeight: '500',
    },
    titleBorder: {
        '&:after': {
            content: '""',
            width: '15px',
            borderBottom: 'solid 2px',
            borderColor: theme.palette.primary.main + '!important',
            display: 'flex',
        },
    },
    video: {
        [theme.breakpoints.up('md')]: {
            paddingBottom: '35%', /* 16:9 */
        },
    }
}));

export default function CandidatureDetail(props) {
    const classes = useStyles();

    return (
        <Fragment>
            <VideoVimeo classes={{ video: classes.video }}  videoId={Ar.last(_.split(props.video.cdn_url, '/'))} />
        </Fragment>
    );
}