import { ReactNode } from "react"
import Spinner2 from "../core/Spinner2"
import { Save } from "lucide-react"
import { Button } from "../ui/button"
import { cn } from "@/lib/utils"



type SectionTitleType = {
    title?: string,
    description?: string,
    sideChildren?: ReactNode

}

interface SectionType extends SectionTitleType {
    children: ReactNode,
    onClick?: () => void,
    disabled?: boolean,
    processing?: boolean,
    save?: boolean,
    className?: string,
    sideChildren?: ReactNode
}

export function SeectionCardTitle({ title, description, sideChildren }: SectionTitleType) {

    if (!title) return

    return <div className="flex flex-1 justify-between items-center gap-0.5 border-b pb-2 text-sm">
        <div>
            {title && <p>{title}</p>}
            {description && <p className="text-neutral-400">{description}</p>}
        </div>

        {sideChildren}

    </div>

}



export default function SectionCard({ title, description, children, disabled, processing, save, onClick, className, sideChildren }: SectionType) {
    return <div className={cn('bg-card/60 border rounded-sm p-4 flex-1 space-y-3 h-fit', className)}>
        <SeectionCardTitle title={title} description={description} sideChildren={sideChildren} />

        {children}

        {
            save && <div className='w-full justify-end flex'>
                <Button size='sm' onClick={onClick} disabled={processing}>
                    {processing ? (<><Spinner2 /> Saving...</>) : (<><Save /> Save</>)}
                </Button>
            </div>
        }
    </div>

}
