import React from 'react';
import PropTypes from 'prop-types';

import {
  H5,
  FilterContainer,
} from './styles';

const filterLinks = [
  { name: 'All' },
  { name: 'Interactive' },
  { name: 'Branding' },
  { name: 'Film' },
  { name: 'Development' },
];

const Filter = ({ changeFilter, currentFilter, active, reveal }) => (
  <FilterContainer>
    { filterLinks.map((v, i) => (
      <H5
        key={ i }
        onClick={ changeFilter }
        active={
          (currentFilter || active) === v.name.toLowerCase()
        }
        reveal={ reveal }
        index={ i + 1 }
      >
        { v.name }
      </H5>

    ))}
  </FilterContainer>);

Filter.defaultProps = {
  currentFilter: null,
  active: null,
  reveal: false,
};

Filter.propTypes = {
  changeFilter: PropTypes.func.isRequired,
  currentFilter: PropTypes.string,
  active: PropTypes.string,
  reveal: PropTypes.bool,
};

export default Filter;