import { clsn } from "~utils";
import { IconBack } from "~assets/icons";
import type { ReactNode, PropsWithChildren } from "react";

import styles from "./tab.module.less";

interface TabProps extends PropsWithChildren {
  className: string;
}

interface HeaderProps {
  title: ReactNode;
  onBack: () => void;
}

function Tab({ className, children }: TabProps) {
  return (
    <div className={clsn(styles.tab, className)}>
      {children}
    </div>
  );
}

Tab.Header = function Header({ title, onBack }: HeaderProps) {
  return (
    <header className={styles.header}>
      <button className={styles.back} onClick={onBack}>
        <IconBack />
      </button>
      <h2>{title}</h2>
    </header>
  );
}

Tab.Body = function Body({ children }: PropsWithChildren) {
  return (
    <main className={styles.body}>
      {children}
    </main>
  );
}

Tab.Footer = function Footer({ children }: PropsWithChildren) {
  return (
    <footer className={styles.footer}>
      {children}
    </footer>
  );
}

export default Tab;