import './DocsEntryCard.css';

interface DocsEntryCardProps {
  /** compact = inline row; featured = login-page hero card */
  variant?: 'compact' | 'featured';
  className?: string;
}

function DocsIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
      <path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
      <path d="M8 7h8M8 11h8M8 15h5" strokeOpacity="0.65" />
    </svg>
  );
}

export default function DocsEntryCard({ variant = 'featured', className = '' }: DocsEntryCardProps) {
  return (
    <a
      href="/docs/"
      target="_blank"
      rel="noopener noreferrer"
      className={`docs-entry-card docs-entry-card--${variant}${className ? ` ${className}` : ''}`}
    >
      <span className="docs-entry-card-glow" aria-hidden />
      <span className="docs-entry-card-icon">
        <DocsIcon />
      </span>
      <span className="docs-entry-card-body">
        <strong className="docs-entry-card-title font-tech">Documentation</strong>
        <span className="docs-entry-card-blurb">
          Searchable wiki — Forge, Spread, Fleet, API &amp; troubleshooting
        </span>
      </span>
      <span className="docs-entry-card-arrow" aria-hidden>
        →
      </span>
    </a>
  );
}