import React from 'react';
import Subtitle from './Subtitle';

function TitleCard({ title, children, topMargin, TopSideButtons }) {
    return (
        <div className={`card w-full p-6 bg-base-100 shadow-xl ${topMargin || "mt-6"}`}>

            {/* Title และ Top Side Buttons */}
            <div className="flex justify-between items-center">
                <Subtitle styleClass={TopSideButtons ? "flex-grow" : ""}>
                    {title}
                </Subtitle>

                {/* Top side button, show only if present */}
                {TopSideButtons && (
                    <div className="flex-shrink-0 ml-4">
                        {TopSideButtons}
                    </div>
                )}
            </div>

            {/* Divider (เส้นแบ่ง) */}
            <div className="divider mt-2 mb-4"></div>

            {/* Card Body */}
            <div className='h-full w-full'>
                {children}
            </div>
        </div>
    );
}

export default TitleCard;
