/**
 * Section: a titled card composed from the ported design-system pieces
 * (Card + InlineStack header + Divider + BlockStack body). Replaces the
 * old @wordpress/components Card/CardHeader/CardBody triple.
 *
 * `icon` takes a glyph name from the rbfb-icon font and renders it ahead of
 * the title. It is decorative — the title always carries the meaning.
 */
import { BlockStack, Card, InlineStack } from '../ui/molecules';
import { Divider, Icon, Text } from '../ui/atoms';

export default function Section( {
	title,
	icon,
	actions,
	children,
	gap = 16,
} ) {
	return (
		<Card
			padding={ 0 }
			rounded="lg"
			border="gray-200"
			background="white"
			widthFull
			className="rbfb-section"
		>
			{ title && (
				<>
					<InlineStack
						align="between"
						blockAlign="center"
						gap={ 10 }
						padding="14px 24px"
					>
						<InlineStack gap={ 8 } blockAlign="center">
							{ icon && (
								<Icon
									name={ icon }
									color="gray-500"
									fontSize="lg"
								/>
							) }
							<Text as="h2" size="sm" weight="semibold">
								{ title }
							</Text>
						</InlineStack>
						{ actions }
					</InlineStack>
					<Divider />
				</>
			) }
			<BlockStack padding={ 24 } gap={ gap } inlineAlign="start">
				{ children }
			</BlockStack>
		</Card>
	);
}
