import * as React from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';

export interface ContentCardProps {
    title: string;
    description?: string;
    children: React.ReactNode;
    className?: string;
    headerClassName?: string;
    contentClassName?: string;
    action?: React.ReactNode;
}

const ContentCard = React.memo(function ContentCard({
    title,
    description,
    children,
    className,
    headerClassName,
    contentClassName,
    action,
}: ContentCardProps) {
    return (
        <Card className={cn('', className)}>
            <CardHeader className={cn('', headerClassName)}>
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle>{title}</CardTitle>
                        {description && <CardDescription>{description}</CardDescription>}
                    </div>
                    {action}
                </div>
            </CardHeader>
            <CardContent className={cn('', contentClassName)}>
                {children}
            </CardContent>
        </Card>
    );
});

export { ContentCard };