import { ReactNode } from "react";
import clsx from "clsx";

import Typography from "../Typography/Typography";

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

interface SectionProps {
  title?: string;
  children: ReactNode;
  className?: string;
  titleClassName?: string;
  contentClassName?: string;
}

export default function Section({
  title,
  children,
  className,
  titleClassName,
  contentClassName,
}: SectionProps) {
  return (
    <section className={clsx(styles.section, className)}>
      {title && (
        <Typography
          className={clsx(styles.title, titleClassName)}
          as="h2"
          weight="medium"
          size="2xl"
        >
          {title}
        </Typography>
      )}
      <div className={clsx(styles.content, contentClassName)}>{children}</div>
    </section>
  );
}