'use client';

import React, {FC} from 'react';
import {InputStyle as S} from './form-container.style';
import {IFormContainer} from './form-container.type';
import {RedStarComponent} from '../../atoms/red-star';

/**
 *
 * @author Sina Shahoveisi
 * @version 0.0.1
 * @description A React component that renders label and description for form validation.
 * @madeUse Emotion
 */
export const FormContainerComponent: FC<IFormContainer> = ({
    id,
    label,
    hint,
    error,
    containerClassName,
    children,
    mandatory,
}) => {
    return (
        <S.Wrapper className={containerClassName}>
            <S.Header>
                {mandatory && <RedStarComponent />}
                {label && (
                    <S.Label dir='auto' htmlFor={id}>
                        {label}
                    </S.Label>
                )}
            </S.Header>
            {children}
            {hint && (
                <S.Description dir='auto' error={error}>
                    {hint}
                </S.Description>
            )}
        </S.Wrapper>
    );
};