import React, { Component } from 'react';
import DocumentMeta from 'react-document-meta';

import WorkFilter from '../../Work/WorkFilter';
import ViewWrap from '../../ViewWrap';
import Gutter from '../../Layout/Gutter';

import randomArray from '../../../utilities/randomNumberArray';

import ogImage from '../../../assets/og-image.jpg';

import './WorkArchive.css';

const animateOrder = randomArray(0);

class WorkArchive extends Component {

	render() {

		const meta = {
			title: 'Keen Studio - Our Work - Full Service Creative Firm in Grand Rapids, MI',
			description: 'Check out our portfolio, complete with our work in branding, graphic design, web design, web development, video, animation and much more.',
			meta: {
				name: {
					keywords: 'Branding, Logo Design, Graphic Design, Web Design, Web Development, Animation, Video, User Experience, User Interface, UX, UI'
				},
				property: {
					'og:title': 'Keen Studio - Our Work',
					'og:description': 'Check out our portfolio, complete with our work in branding, graphic design, web design, web development, video, animation and much more.',
					'og:image': ogImage,
					'og:url': window.location.href
				}
			}
		}

		return (
			<ViewWrap view="work-archive">
				<DocumentMeta {...meta} />
				<Gutter data-animate={animateOrder[0]}>
					<h1>All Work</h1>
				</Gutter>
				<WorkFilter />
			</ViewWrap>
		);
	}
}

export default WorkArchive;
