"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { NoDataFound } from "@/components/ui/no-data-found";
import { Skeleton } from "@/components/ui/skeleton";

type MarketingChartCardProps = {
  title: string;
  subtitle?: string;
  isLoading?: boolean;
  isEmpty?: boolean;
  emptyMessage?: string;
  emptyDescription?: string;
  className?: string;
  chartHeight?: number;
  headerRight?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
};

export function MarketingChartCard({
  title,
  subtitle,
  isLoading,
  isEmpty,
  emptyMessage = "No data",
  emptyDescription,
  className,
  chartHeight = 280,
  headerRight,
  footer,
  children,
}: MarketingChartCardProps) {
  return (
    <figure
      aria-label={subtitle ? `${title}. ${subtitle}` : title}
      className={cn(
        "group relative overflow-hidden rounded-2xl border border-white/70 bg-white/60 p-5 shadow-[0_2px_20px_rgba(15,17,23,0.06)] backdrop-blur-xl transition-all duration-300 hover:border-[#6C63FF]/20 hover:shadow-[0_8px_32px_rgba(108,99,255,0.12)] motion-reduce:transition-none",
        className,
      )}
    >
      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#6C63FF]/30 to-transparent" />

      <div className="mb-4 flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h3 className="font-['Lexend'] text-sm font-extrabold tracking-tight text-text">
            {title}
          </h3>
          {subtitle ? (
            <p className="mt-0.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
              {subtitle}
            </p>
          ) : null}
        </div>
        {headerRight ? <div className="shrink-0">{headerRight}</div> : null}
      </div>

      {isLoading ? (
        <Skeleton
          className="w-full rounded-xl bg-gray-200/70"
          style={{ height: chartHeight }}
        />
      ) : isEmpty ? (
        <NoDataFound
          message={emptyMessage}
          description={emptyDescription}
          size="sm"
        />
      ) : (
        children
      )}

      {!isLoading && !isEmpty && footer ? (
        <div className="mt-4 border-t border-gray-100/80 pt-3">{footer}</div>
      ) : null}
    </figure>
  );
}