import { Typography } from "@/components/ui";

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

interface ProfileBlockProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
}

function ProfileBlock({ title, description, children }: ProfileBlockProps) {
  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Typography
          className={styles.title}
          as="h2"
          size="xl"
          weight="semiBold"
          align="left"
        >
          {title}
        </Typography>
        {description && (
          <Typography className={styles.description} size="sm" align="left">
            {description}
          </Typography>
        )}
      </header>
      {!!children && <div className={styles.content}>{children}</div>}
    </section>
  );
}

export default ProfileBlock;
