"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface CardAppProps {
  title?: string;
  description?: string;
  children: React.ReactNode;
  /** Extra content di kanan header (tombol, badge, dll) */
  headerAction?: React.ReactNode;
  /** className untuk Card root */
  className?: string;
  /** className untuk CardContent */
  contentClassName?: string;
  /** Tanpa header — hanya content (misal stat card) */
  headerless?: boolean;
}

export function CardApp({
  title,
  description,
  children,
  headerAction,
  className,
  contentClassName,
  headerless,
}: CardAppProps) {
  if (headerless) {
    return (
      <Card className={className}>
        <CardContent className={cn("p-4", contentClassName)}>
          {children}
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={className}>
      {title && (
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="text-lg">{title}</CardTitle>
              {description && (
                <CardDescription>{description}</CardDescription>
              )}
            </div>
            {headerAction && <div>{headerAction}</div>}
          </div>
        </CardHeader>
      )}
      <CardContent className={contentClassName}>{children}</CardContent>
    </Card>
  );
}