import React from 'react';
import styled from '@emotion/styled';
import { useLocalStore } from '@components';

const FooterContainer = styled('div')`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  height: 30px;
  background: #585858;
`;

const FooterText = styled('p')`
  color: white;
  font-family: "WDXL Lubrifont TC";
`;

export const Footer = () => {
  const { department } = useLocalStore();
  return (
    <FooterContainer>
      <FooterText>{`© ${new Date().getFullYear()} ShiftSync`}</FooterText>
      <FooterText>{department?.name}</FooterText>
    </FooterContainer>
  )
}