import React, { PropsWithChildren, ReactNode } from "react";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
} from "@/components/ui/card";

type UserFormSectionProps = PropsWithChildren<{
    icon?: ReactNode;
    title: string;
    description?: string;
}>;

export const UserFormSection: React.FC<UserFormSectionProps> = (props) => {
    const {
        icon,
        title,
        description,
        children
    } = props;

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                    {icon}
                    <span>{title}</span>
                </CardTitle>

                {description && (
                    <CardDescription>{description}</CardDescription>
                )}
            </CardHeader>

            <CardContent>{children}</CardContent>
        </Card>
    );
};