import preact, { h, Component } from 'preact'; // eslint-disable-line no-unused-vars

import { getSourceSet } from '../helpers/helpers';

export default class Footer extends Component {

    constructor() {
        super();
    }

    render(props) {
        const img = props.img,
              classCSS = props.classCSS || 'o-figure--inner';

        if (!img) {
            return (
                <div class="o-figure--inner" style="box-shadow: inset rgba(0, 0, 0, .15) 0px 0px 1px 1px" />
            );
        }

        const srcset = getSourceSet(img),
              holder = img.holder + '.webp 1x';

        return (
            <div class={classCSS}>
                <picture class="o-figure--holder">
                    <source type="image/webp" srcset={holder} class="o-figure--holder" />
                    <img src={img.holder} tabindex="-1" alt="" class="o-figure--holder" />
                </picture>
                <picture class="o-figure--picture">
                    <source type="image/webp" media="(max-width: 338px)" srcset={srcset.imgwebp} />
                    <source type="image/webp" media="(max-width: 498px)" srcset={srcset.mediumwebp} />
                    <source type="image/webp" srcset={srcset.largewebp} />
                    <source media="(max-width: 338px)" srcset={srcset.img} />
                    <source media="(max-width: 498px)" srcset={srcset.medium} />
                    <img srcset={srcset.large} src={img.large} alt={img.text} />
                </picture>
            </div>
        );
    }
}
