"use client";

import React from "react";
import { StatusPill } from "@/components/atoms/status-pill";

type Variant = "success" | "warning" | "error" | "neutral" | "info";

interface DetailHeaderProps {
  title: string;
  subtitle?: string;
  status?: { label: string; variant: Variant };
  leftIcon?: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
  meta?: React.ReactNode; // optional metadata row under header
}

export function DetailHeader({
  title,
  subtitle,
  status,
  leftIcon,
  actions,
  className,
  meta,
}: DetailHeaderProps) {
  return (
    <div className={`pb-4 border-b border-gray-200 ${className || ""}`}>
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          {leftIcon}
          <div className={leftIcon ? "ml-3" : undefined}>
            <h3 className="text-lg font-medium text-gray-900">{title}</h3>
            {subtitle && <p className="text-sm text-gray-500">{subtitle}</p>}
          </div>
        </div>
        {status && <StatusPill label={status.label} variant={status.variant} />}
        {actions}
      </div>
      {meta && <div className="mt-4">{meta}</div>}
    </div>
  );
}

export type { DetailHeaderProps };
