import React from 'react';
import type { ReactNode } from 'react';

import InfoTooltip from './InfoTooltip';

interface SectionProps {
  title?: string;
  tooltip?: string;
  children: ReactNode;
}

const Section = ({ title, tooltip, children }: SectionProps): JSX.Element => (
  <div className="bg-white rounded-xl border border-gray-200 p-5">
    <div className="flex flex-col gap-4">
      {title && (
        <h3 className="text-sm font-semibold text-gray-900">
          {title}
          {tooltip && <InfoTooltip text={tooltip} />}
        </h3>
      )}
      {children}
    </div>
  </div>
);

export default Section;