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

export interface SubCardProps {
  title?: string;
  icon?: ReactNode;
  right?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
  className?: string;
  headerClassName?: string;
  bodyClassName?: string;
  /** Enable hover effects for interactive cards */
  interactive?: boolean;
}

function renderSubCardHeader(
  header: ReactNode | undefined,
  title: string | undefined,
  icon: ReactNode | undefined,
  right: ReactNode | undefined,
  headerClassName: string
): ReactNode {
  if (header) {
    return <div className={`${headerClassName || "mb-5"}`}>{header}</div>;
  }
  if (title) {
    return (
      <div className={`flex items-center justify-between mb-5 ${headerClassName}`}>
        <div className="flex items-center gap-3">
          {icon && <div className="text-primary">{icon}</div>}
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
        </div>
        {right}
      </div>
    );
  }
  return null;
}

export const SubCard = forwardRef<HTMLDivElement, SubCardProps>(
  (
    {
      title,
      icon,
      right,
      header,
      footer,
      children,
      className = "",
      headerClassName = "",
      bodyClassName = "",
      interactive = false,
    },
    ref
  ) => (
    <div
      ref={ref}
      className={cn(
        "border border-border bg-card text-card-foreground shadow-sm rounded-2xl p-5 sm:p-6",
        interactive &&
          "transition-all duration-200 hover:shadow-md hover:border-border/80 cursor-pointer",
        className
      )}
    >
      {renderSubCardHeader(header, title, icon, right, headerClassName)}
      <div className={bodyClassName}>{children}</div>
      {footer ? <div className="mt-5 pt-5 border-t border-border/60">{footer}</div> : null}
    </div>
  )
);
SubCard.displayName = "SubCard";
