"use client";

import Link from "next/link";
import clsx from "clsx";

import { Button, Icon, IconName, Typography } from "@/components/ui";
import { ROUTES } from "@/shared/constants/client-routes";

import styles from "./Drawer.module.scss";

interface DrawerProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function Drawer({ isOpen, onClose }: DrawerProps) {
  return (
    <>
      {isOpen && <div className={styles.overlay} onClick={onClose} />}
      <aside className={clsx(styles.drawer, isOpen && styles.open)}>
        <Button className={styles.close} onClick={onClose} aria-label="Close">
          <Icon
            size={{
              height: 18,
              width: 18,
            }}
            name={IconName.Cross}
          />
        </Button>
        <nav className={styles.content}>
          <Link href={ROUTES.profile()}>
            <Typography weight="medium">Profile</Typography>
          </Link>
        </nav>
      </aside>
    </>
  );
}
