import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type ConfigWorkflowSectionProps = {
  step: number;
  title: string;
  description?: ReactNode;
  children: ReactNode;
  className?: string;
  contentClassName?: string;
};

/** 编号步骤卡片，用于赔率/回水等合并配置页主栏分区。 */
export function ConfigWorkflowSection({
  step,
  title,
  description,
  children,
  className,
  contentClassName,
}: ConfigWorkflowSectionProps) {
  return (
    <section className={cn("overflow-hidden rounded-xl border border-border/60 bg-card", className)}>
      <div className="flex gap-3 border-b border-border/50 px-4 py-3.5 sm:px-5">
        <span
          aria-hidden
          className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground"
        >
          {step}
        </span>
        <div className="min-w-0 flex-1 space-y-0.5">
          <h3 className="text-base font-semibold tracking-tight">{title}</h3>
          {description ? <div className="text-sm text-muted-foreground">{description}</div> : null}
        </div>
      </div>
      <div className={cn("px-4 py-4 sm:px-5", contentClassName)}>{children}</div>
    </section>
  );
}