import type { ReactNode } from "react";
import { cn } from "@/shared/utils";

type SectionTone = "primary" | "success" | "info" | "warning" | "danger" | "neutral";

const toneStyles: Record<SectionTone, string> = {
  primary: "bg-primary/10 text-primary",
  success: "bg-success/10 text-success",
  info: "bg-info/10 text-info",
  warning: "bg-warning/10 text-warning",
  danger: "bg-danger/10 text-danger",
  neutral: "bg-neutral/10 text-neutral",
};

interface SectionCardProps {
  icon: ReactNode;
  title: string;
  subtitle?: string | undefined;
  tone?: SectionTone;
  actions?: ReactNode | undefined;
  children: ReactNode;
  className?: string | undefined;
}

export function SectionCard({
  icon,
  title,
  subtitle,
  tone = "primary",
  actions,
  children,
  className,
}: SectionCardProps) {
  return (
    <div
      className={cn(
        "bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] overflow-hidden",
        className
      )}
    >
      <div className="bg-muted/40 px-6 py-4 border-b border-border/40">
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-3 min-w-0">
            <div
              className={cn(
                "h-9 w-9 rounded-lg flex items-center justify-center flex-shrink-0",
                toneStyles[tone]
              )}
            >
              {icon}
            </div>
            <div className="min-w-0">
              <h3 className="text-sm font-semibold text-foreground">{title}</h3>
              {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
            </div>
          </div>
          {actions && <div className="flex items-center gap-2 flex-shrink-0">{actions}</div>}
        </div>
      </div>
      <div className="px-6 py-5">{children}</div>
    </div>
  );
}
