import type { ReactNode } from 'react';
import { Text } from 'react-native';

import { Card } from './card';

export const FormSection = ({
  children,
  description,
  title,
}: {
  children: ReactNode;
  description?: string;
  title: string;
}) => (
  <Card className='gap-4'>
    <Text className='text-foreground font-semibold'>{title}</Text>
    {description ? (
      <Text className='text-muted-foreground -mt-2 text-sm leading-5'>
        {description}
      </Text>
    ) : null}
    {children}
  </Card>
);
