import { ChevronDownIcon, InfoIcon } from "lucide-react";
import type { ReactNode } from "react";

export function ContextHelp({
  title,
  description,
  examples,
  guidance,
  examplesLabel,
  scopeNote,
  icon = <InfoIcon />,
  variant = "card",
}: {
  title: string;
  description: string;
  examples: string;
  guidance: string;
  examplesLabel: string;
  scopeNote?: string | undefined;
  icon?: ReactNode;
  variant?: "card" | "plain";
}) {
  return (
    <aside
      aria-label={title}
      className={
        variant === "plain"
          ? "space-y-1 border-t border-border/60 pt-3 text-sm"
          : "space-y-4 rounded-xl border bg-muted/30 p-4 text-sm sm:p-5"
      }
    >
      <div className="flex items-start gap-3">
        <span
          aria-hidden="true"
          className={
            variant === "plain"
              ? "flex size-5 shrink-0 items-center justify-center pt-1 text-muted-foreground [&_svg]:size-4"
              : "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary [&_svg]:size-5"
          }
        >
          {icon}
        </span>
        <div className="min-w-0 space-y-1 pt-1">
          <p className="text-base font-semibold text-foreground">{title}</p>
          <p className="leading-relaxed text-muted-foreground">{description}</p>
          {scopeNote && <p className="leading-relaxed text-muted-foreground">{scopeNote}</p>}
        </div>
      </div>
      <details
        className={
          variant === "plain"
            ? "group"
            : "group overflow-hidden rounded-lg border border-primary/10"
        }
      >
        <summary
          className={`flex cursor-pointer list-none items-center gap-3 font-semibold text-primary focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring [&::-webkit-details-marker]:hidden ${variant === "plain" ? "py-2 text-sm hover:underline" : "rounded-lg bg-primary/5 px-4 py-3"}`}
        >
          <ChevronDownIcon
            aria-hidden="true"
            className="size-4 shrink-0 -rotate-90 transition-transform group-open:rotate-0 motion-reduce:transition-none"
          />
          {examplesLabel}
        </summary>
        <div className="space-y-2 px-4 py-3 leading-relaxed text-muted-foreground">
          <p>{examples}</p>
          <p>{guidance}</p>
        </div>
      </details>
    </aside>
  );
}