import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';
import { sectionShadow, sectionStyles, sectionVariants } from './styles';

type SectionVariant = keyof typeof sectionVariants;
type SectionShadow = keyof typeof sectionShadow;

export const Section = ({
  children,
  variant = 'default',
  shadow = 'none',
  title,
}: {
  title?: string;
  children: ReactNode;
  variant?: SectionVariant;
  shadow?: SectionShadow;
}) => {
  return (
    <div
      {...stylex.props(
        sectionStyles.base,
        sectionVariants[variant],
        sectionShadow[shadow]
      )}
    >
      <Layout column gap="4">
        {title && <Text variant="title-4">{title}</Text>}
        {children}
      </Layout>
    </div>
  );
};