import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";
import type { DashboardTabOption } from "./dashboard-home-types";

interface DashboardSectionCardProps {
  title?: string;
  actionLabel?: string;
  tabs?: DashboardTabOption[];
  activeTabId?: string;
  onTabChange?: (tabId: string) => void;
  onActionClick?: () => void;
  leadingContent?: ReactNode;
  children: ReactNode;
  className?: string;
  bodyClassName?: string;
}

export function DashboardSectionCard({
  title,
  actionLabel,
  tabs,
  activeTabId,
  onTabChange,
  onActionClick,
  leadingContent,
  children,
  className,
  bodyClassName,
}: DashboardSectionCardProps) {
  const hasHeaderContent = Boolean(title || actionLabel || tabs || leadingContent);

  return (
    <Card className={cn("gap-0 rounded-xl border-stroke bg-card py-0 shadow-none", className)}>
      {hasHeaderContent && (
        <CardHeader className="flex min-h-[72px] items-center justify-between gap-3 px-6 py-4">

          <div className="flex items-center gap-3">
            {title ? (
              <h2 className=" text-base font-bold leading-[1.3] text-foreground">
                {title}
              </h2>
            ) : null}

            {tabs && tabs.length > 0 ? (
              <div className="flex items-center rounded-xl border border-stroke p-1">
                {tabs.map((tab) => {
                  const isActive = tab.id === activeTabId;

                  return (
                    <Button
                      key={tab.id}
                      type="button"
                      variant="ghost"
                      size="sm"
                      className={cn(
                        "h-8 rounded-lg px-6 text-sm font-bold text-muted-foreground hover:bg-primary-50",
                        isActive && "rounded-xl bg-primary text-white hover:bg-primary/90 hover:text-white"
                      )}
                      onClick={() => onTabChange?.(tab.id)}
                    >
                      {tab.label}
                    </Button>
                  );
                })}
              </div>
            ) : null}
          </div>
          <div className="flex items-center">
            {leadingContent}
            {!leadingContent && actionLabel ? (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-8 gap-2 rounded-xl px-0 text-base font-bold text-primary hover:bg-primary-50/60"
                onClick={onActionClick}
              >
                {actionLabel}
                <ArrowLeft className="h-5 w-5 ltr:rotate-180" />
              </Button>
            ) : null}
          </div>


        </CardHeader>
      )}

      <CardContent className={cn("px-6 pb-6", bodyClassName)}>{children}</CardContent>
    </Card>
  );
}