import { forwardRef, type ReactNode } from "react";

export interface SubCardProps {
  title?: string;
  icon?: ReactNode;
  right?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
  className?: string;
  headerClassName?: string;
  bodyClassName?: string;
}

export const SubCard = forwardRef<HTMLDivElement, SubCardProps>(
  (
    {
      title,
      icon,
      right,
      header,
      footer,
      children,
      className = "",
      headerClassName = "",
      bodyClassName = "",
    },
    ref
  ) => (
    <div
      ref={ref}
      className={`border-[var(--cp-card-border)] bg-white shadow-[var(--cp-card-shadow)] rounded-[var(--cp-card-radius)] p-[var(--cp-card-padding)] transition-shadow duration-[var(--cp-transition-normal)] hover:shadow-[var(--cp-card-shadow-lg)] ${className}`}
    >
      {header ? (
        <div className={`${headerClassName || "mb-[var(--cp-space-lg)]"}`}>{header}</div>
      ) : title ? (
        <div
          className={`flex items-center justify-between mb-[var(--cp-space-lg)] ${headerClassName}`}
        >
          <div className="flex items-center gap-[var(--cp-space-sm)]">
            {icon && <div className="text-primary">{icon}</div>}
            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          </div>
          {right}
        </div>
      ) : null}
      <div className={bodyClassName}>{children}</div>
      {footer ? (
        <div className="mt-[var(--cp-space-lg)] pt-[var(--cp-space-lg)] border-t border-border">
          {footer}
        </div>
      ) : null}
    </div>
  )
);
SubCard.displayName = "SubCard";
