import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

/** Başlıklı içerik kutusu — admin-panel ile uyumlu */
export function ComponentCard({
  title,
  desc,
  children,
  className,
}: {
  title: string;
  desc?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn('admin-panel', className)}>
      <div className="px-6 py-5">
        <h3 className="text-[15px] font-semibold tracking-tight text-zinc-900 dark:text-white">{title}</h3>
        {desc ? <p className="mt-1 text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400">{desc}</p> : null}
      </div>
      <div className="border-t border-zinc-100 p-4 dark:border-zinc-800 sm:p-6">
        <div className="space-y-6">{children}</div>
      </div>
    </div>
  );
}