import React, { CSSProperties, ReactNode } from 'react';
import styles from './FormCard.module.scss';

interface FormCardProps {
    children: ReactNode;
    className?: string;
    style?: CSSProperties;
}

interface FormCardHeaderProps {
    children: ReactNode;
    icon?: ReactNode;
    className?: string;
}

interface FormCardBodyProps {
    children: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export function FormCard({ children, className = '', style }: FormCardProps) {
    return (
        <div className={`${styles.formCard} ${className}`} style={style}>
            {children}
        </div>
    );
}

export function FormCardHeader({ children, icon, className = '' }: FormCardHeaderProps) {
    return (
        <div className={`${styles.formCardHeader} ${className}`}>
            <h3>
                {icon && <span className={styles.icon}>{icon}</span>}
                {children}
            </h3>
        </div>
    );
}

export function FormCardBody({ children, className = '', style }: FormCardBodyProps) {
    return (
        <div className={`${styles.formCardBody} ${className}`} style={style}>
            {children}
        </div>
    );
}