Feature Highlight

import * as React from "react";
import { cn } from "@/lib/utils";

export interface FeatureHighlightProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  /** Icon rendered inside the chip, e.g. a lucide icon. */
  icon?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
}

/**
 * The quiet-premium accent card for docs callouts and marketing features.
 *
 * The hairline border is a static vertical gradient — brighter along the
 * top, settling into the plain border color — confined to a 1px ring via
 * the double-mask composite trick, and doubled by a soft top-edge
 * highlight line. No animation anywhere: this surface reads premium by
 * precision, not motion.
 */
export function FeatureHighlight({
  icon,
  title,
  description,
  className,
  children,
  ...props
}: FeatureHighlightProps) {
  return (
    <div
      data-slot="feature-highlight"
      className={cn(
        "relative rounded-xl bg-card p-5 text-card-foreground",
        className,
      )}
      {...props}
    >
      {/* Hairline gradient ring. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-[inherit]"
        style={{
          padding: 1,
          background:
            "linear-gradient(to bottom, color-mix(in oklab, var(--color-foreground) 22%, transparent), var(--color-border) 55%)",
          mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
          WebkitMaskComposite: "xor",
          maskComposite: "exclude",
        }}
      />
      {/* Top-edge highlight line. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
      />

      {icon ? (
        <div
          aria-hidden
          className="mb-3 flex size-8 items-center justify-center rounded-md bg-secondary text-foreground shadow-border [&_svg]:size-4"
        >
          {icon}
        </div>
      ) : null}
      {title ? (
        <h3 className="text-sm leading-snug font-medium">{title}</h3>
      ) : null}
      {description ? (
        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
      ) : null}
      {children}
    </div>
  );
}