'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

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

export function ProfileSection({ title, description, action, children }: ProfileSectionProps) {
  return (
    <Box mb={8}>
      <Stack direction="row" align="center" justify="between" mb={4}>
        <Box>
          <Heading level={2}>{title}</Heading>
          {description && (
            <Text color="text-gray-400" size="sm" mt={1} block>
              {description}
            </Text>
          )}
        </Box>
        {action && <Box>{action}</Box>}
      </Stack>
      <Box>{children}</Box>
    </Box>
  );
}