'use client';

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

interface FilterCardProps {
    title?: string;
    icon?: ReactNode;
    children?: ReactNode;
    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
    className?: string;
    style?: CSSProperties;
}

export default function FilterCard({
    title,
    icon,
    children,
    onSubmit,
    className = '',
    style,
}: FilterCardProps) {
    return (
        <div className={`${styles.filtrosCard} ${className}`} style={style}>
            {title && (
                <div className={styles.filtrosHeader}>
                    <h3>
                        {icon && <span className={styles.filtrosHeaderIcon}>{icon}</span>}
                        {title}
                    </h3>
                </div>
            )}
            <form onSubmit={onSubmit} className={styles.filtrosForm}>
                {children}
            </form>
        </div>
    );
}