import { Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";

interface ExportAction {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
}

interface ExportPanelProps {
  title: string;
  description: string;
  children?: React.ReactNode;
  primaryAction: ExportAction;
  secondaryAction?: ExportAction;
}

export function ExportPanel({
  title,
  description,
  children,
  primaryAction,
  secondaryAction
}: ExportPanelProps) {
  return (
    <section className="glass-panel panel-elevated rounded-2xl border border-white/15 p-5">
      <div className="space-y-1">
        <h3 className="font-[var(--font-space-grotesk)] text-lg font-medium text-white">{title}</h3>
        <p className="text-sm text-slate-300">{description}</p>
      </div>

      {children ? <div className="mt-4 space-y-4">{children}</div> : null}

      <div className="mt-5 flex flex-wrap gap-2">
        <Button
          disabled={primaryAction.disabled || primaryAction.loading}
          className="focus-visible:ring-sky-300/60"
          onClick={primaryAction.onClick}
        >
          {primaryAction.loading ? <Loader2 className="size-4 animate-spin" data-icon="inline-start" /> : null}
          {primaryAction.label}
        </Button>

        {secondaryAction ? (
          <Button
            variant="outline"
            className="border-white/20 bg-slate-900/50 focus-visible:ring-sky-300/60"
            disabled={secondaryAction.disabled || secondaryAction.loading}
            onClick={secondaryAction.onClick}
          >
            {secondaryAction.loading ? (
              <Loader2 className="size-4 animate-spin" data-icon="inline-start" />
            ) : null}
            {secondaryAction.label}
          </Button>
        ) : null}
      </div>
    </section>
  );
}
