NavBar.component.tsx

import Image from 'next/image';
import { IconButton } from '@/shared/IconButton';
import logoImg from '@/assets/images/logo.png';
import luxembourgLogoImg from '@/assets/images/luxembourg-logo.png';

export const NavBar = (): JSX.Element => (
  <div className="flex min-h-full w-[88px] flex-col items-center justify-between bg-cultured py-8">
    <div data-testid="nav-buttons">
      <div className="mb-8 flex flex-col gap-[10px]">
        <IconButton icon="info" />
        <IconButton icon="page" />
        <IconButton icon="plugin" />
        <IconButton icon="export" />
      </div>
      <div className="flex flex-col gap-[10px]">
        <IconButton icon="admin" />
        <IconButton icon="legend" />
      </div>
    </div>

    <div className="flex flex-col items-center gap-[20px]" data-testid="nav-logos-and-powered-by">
      <Image
        className="rounded rounded-e rounded-s bg-white-pearl pb-[7px]"
        src={luxembourgLogoImg}
        alt="luxembourg logo"
        height={41}
        width={48}
      />
      <Image src={logoImg} alt="logo" height={48} width={48} />
      <span className="h-16 w-14 text-center text-[8px] leading-4">
        Powered by: MINERVA Platform (v16.0.8)
      </span>
    </div>
  </div>
);