// @flow
import * as React from 'react';

import AccessibleSVG from '../accessible-svg';

import type { Icon } from '../flowTypes';

const IconDownloadFile = ({ className = '', color = '#000', height = 49, title, width = 60 }: Icon) => (
    <AccessibleSVG
        className={`icon-download-file ${className}`}
        height={height}
        title={title}
        viewBox="0 0 49 60"
        width={width}
    >
        <g fill="none" fillRule="evenodd">
            <path
                className="fill-color"
                d="M2.58 60C1.03 60 0 58.957 0 57.39V2.61C0 1.042 1.032 0 2.58 0h30.946L49 15.652v41.74C49 58.956 47.968 60 46.42 60H2.58z"
                fill={color}
            />
            <path
                d="M45.676 58H3.324C2.53 58 2 57.467 2 56.667V3.333C2 2.533 2.53 2 3.324 2h30.44L47 15.333v41.334c0 .8-.53 1.333-1.324 1.333z"
                fill="#FFF"
            />
            <path
                className="fill-color"
                d="M33.526 0L49 15.652H36.105c-1.547 0-2.58-1.043-2.58-2.61V0zM30 33.728h6.728L24 46.456 11.272 33.728H18V19h12v14.728z"
                fill={color}
            />
            <path d="M17 29h14v1H17zm0-5h14v2H17zm0-4h14v2H17z" fill="#FFF" />
        </g>
    </AccessibleSVG>
);

export default IconDownloadFile;