import * as React from "react";

import { cn } from "@/lib/utils";
import { type StylePreset, getStylePreset } from "@/lib/style-presets";

interface LinkPreviewProps {
  href: string;
  title: string;
  description?: string;
  domain?: string;
  imageSrc?: string;
  className?: string;
  target?: "_blank" | "_self";
  style?: React.CSSProperties;
  /**
   * Visual style preset
   * @default "modern"
   */
  stylePreset?: StylePreset;
}

type StyleConfig = {
  container: string;
  media: string;
  icon: string;
  title: string;
  description: string;
  domain: string;
};

const styleConfigs: Record<StylePreset, StyleConfig> = {
  modern: {
    container: "border-border bg-background text-foreground",
    media: "bg-muted",
    icon: "text-muted-foreground",
    title: "text-foreground",
    description: "text-muted-foreground",
    domain: "text-muted-foreground",
  },
  glassmorphism: {
    container: "border-[var(--style-border-color)]/20 bg-[var(--style-bg-surface)]/10 text-[var(--style-text-color)]",
    media: "bg-[var(--style-bg-surface)]/10",
    icon: "text-[var(--style-text-color)]/70",
    title: "text-[var(--style-text-color)]",
    description: "text-[var(--style-text-color)]/70",
    domain: "text-[var(--style-text-color)]/70",
  },
  neumorphism: {
    container: "border-transparent bg-[var(--style-bg-surface)] text-[var(--style-text-color)]",
    media: "bg-[var(--style-bg-input)]",
    icon: "text-[var(--style-text-muted)]",
    title: "text-[var(--style-text-color)]",
    description: "text-[var(--style-text-muted)]",
    domain: "text-[var(--style-text-muted)]",
  },
  brutalist: {
    container: "border-[var(--style-border-color)] bg-[var(--style-bg-surface)] text-[var(--style-text-color)]",
    media: "bg-background",
    icon: "text-[var(--style-text-color)]",
    title: "text-[var(--style-text-color)]",
    description: "text-[var(--style-text-color)]/80",
    domain: "text-[var(--style-text-color)]/80",
  },
  "retro-mac": {
    container: "border-[var(--style-border-color)] bg-[var(--style-bg-surface)] text-[var(--style-text-color)]",
    media: "bg-background",
    icon: "text-[var(--style-text-color)]",
    title: "text-[var(--style-text-color)]",
    description: "text-[var(--style-text-color)]/70",
    domain: "text-[var(--style-text-color)]/70",
  },
  "windows-95": {
    container: "border-0 bg-[var(--style-bg-surface)] text-[var(--style-text-color)] font-['MS_Sans_Serif',Tahoma,sans-serif] shadow-[inset_-1px_-1px_0_#0a0a0a,inset_1px_1px_0_#fff,inset_-2px_-2px_0_#808080,inset_2px_2px_0_#dfdfdf]",
    media: "bg-background shadow-[inset_1px_1px_0_#808080,inset_-1px_-1px_0_#fff]",
    icon: "text-[var(--style-text-color)]",
    title: "text-[var(--style-text-color)] font-['MS_Sans_Serif',Tahoma,sans-serif]",
    description: "text-[var(--style-text-color)] font-['MS_Sans_Serif',Tahoma,sans-serif]",
    domain: "text-[var(--style-text-color)] font-['MS_Sans_Serif',Tahoma,sans-serif]",
  },
  flat: {
    container: "border-border bg-[var(--style-bg-surface)] text-foreground",
    media: "bg-[var(--style-bg-input)]",
    icon: "text-muted-foreground",
    title: "text-foreground",
    description: "text-muted-foreground",
    domain: "text-muted-foreground",
  },
  skeuomorphic: {
    container: "border-primary bg-gradient-to-b from-[var(--style-bg-surface)] to-primary text-primary",
    media: "bg-primary",
    icon: "text-primary",
    title: "text-primary",
    description: "text-primary",
    domain: "text-primary",
  },
};

const GlobeIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12h18" />
    <path d="M12 3c3 3.5 3 14 0 18" />
    <path d="M12 3c-3 3.5-3 14 0 18" />
  </svg>
);

export function LinkPreview({
  href,
  title,
  description,
  domain,
  imageSrc,
  className,
  target = "_blank",
  stylePreset = "modern",
  style,
}: LinkPreviewProps) {
  const styles = styleConfigs[stylePreset];

  return (
    <a
      href={href}
      target={target}
      rel={target === "_blank" ? "noreferrer" : undefined}
      className={cn(
        "group flex w-full overflow-hidden rounded-xl",
        "border border-border bg-background text-foreground",
        "transition-colors hover:bg-muted",
        styles.container,
        className
      )}
      style={{ ...getStylePreset(stylePreset).variables, ...style }}
    >
      <div
        className={cn("relative w-40 shrink-0 overflow-hidden bg-muted", styles.media)}
      >
        {imageSrc ? (
          <img
            src={imageSrc}
            alt={title}
            className="h-full w-full object-cover"
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <GlobeIcon className={cn("h-6 w-6 text-muted-foreground", styles.icon)} />
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-2 p-4">
        <div className="space-y-1">
          <h3 className={cn("text-base font-semibold text-foreground", styles.title)}>
            {title}
          </h3>
          {description ? (
            <p className={cn("text-sm text-muted-foreground", styles.description)}>
              {description}
            </p>
          ) : null}
        </div>
        {domain ? (
          <span className={cn("text-xs font-medium text-muted-foreground", styles.domain)}>
            {domain}
          </span>
        ) : null}
      </div>
    </a>
  );
}
Link Preview

UI Destination

Dependencies

Files

Installation

Related Content Components
