import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import type { ReactNode } from 'react';

interface InfoSectionProps {
    title: string;
    description: string;
    children: ReactNode;
    className?: string;
}

/**
 * Reusable card section component
 * Standardizes layout for information sections
 */
export default function InfoSection({
    title,
    description,
    children,
    className = '',
}: InfoSectionProps) {
    return (
        <Card className={className}>
            <CardHeader>
                <CardTitle className="text-lg">{title}</CardTitle>
                <CardDescription>{description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 pt-6">{children}</CardContent>
        </Card>
    );
}