import React from 'react';

import Icon from '../Icon';
import Typography from '../Typography';

import { Container } from './styled';
import { Separator } from '../../global/otherStyled';
import data from './data';

type Props = {
  onClick: (state: string) => void;
  navbarState: string;
  children: React.ReactNode;
  displayMode: string;
  fileName: string;
};

const Navbar: React.FC<Props> = ({
  onClick,
  navbarState,
  children,
  displayMode,
  fileName,
}: Props) => (
  <Container isHidden={displayMode === 'full'}>
    <Typography variant="title">{fileName}</Typography>
    <Separator />
    {data.btnGroup.map((ele) => (
      <Icon
        key={ele.key}
        glyph={ele.content}
        isActive={navbarState === ele.content}
        onClick={(): void => {
          onClick(ele.content);
        }}
      />
    ))}
    {children}
  </Container>
);

export default Navbar;