Logo marquee

'use client';

import type * as React from 'react';
import { type Logo, LogoMarquee } from './logo-marquee';

const LOGOS: Logo[] = [
  { name: 'Orbitly' },
  { name: 'Quillnest' },
  { name: 'Fernwave' },
  { name: 'Brightloom' },
  { name: 'Tidepoint' },
  { name: 'Mintforge' },
  { name: 'Zephro' },
  { name: 'Oakline' },
];

// Simple invented marks, drawn with currentColor so they follow the strip's dimming.
const MARKS: React.ReactNode[] = [
  <circle key="a" cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="3" />,
  <path key="b" d="M4 18 12 4l8 14z" fill="currentColor" />,
  <path
    key="c"
    d="M3 12c3-6 6-6 9 0s6 6 9 0"
    fill="none"
    stroke="currentColor"
    strokeWidth="3"
    strokeLinecap="round"
  />,
  <rect key="d" x="4" y="4" width="16" height="16" rx="5" fill="currentColor" />,
  <path
    key="e"
    d="M12 3 21 12 12 21 3 12z"
    fill="none"
    stroke="currentColor"
    strokeWidth="3"
    strokeLinejoin="round"
  />,
  <path key="f" d="M4 6h16M4 12h10M4 18h16" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />,
  <path key="g" d="M5 5l14 14M19 5 5 19" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />,
  <path key="h" d="M12 3c5 5 5 13 0 18-5-5-5-13 0-18z" fill="currentColor" />,
];

function wordmark(logo: Logo, index: number) {
  return (
    <span role="img" aria-label={logo.name} className="flex items-center gap-1.5 text-lg font-semibold">
      <svg aria-hidden="true" viewBox="0 0 24 24" className="size-5">
        {MARKS[index % MARKS.length]}
      </svg>
      <span aria-hidden="true">{logo.name}</span>
    </span>
  );
}

export default function LogoMarqueeDemo({ replay = 0 }: { replay?: number }) {
  return (
    <div className="w-full max-w-[640px] rounded-xl border border-secondary bg-primary">
      {/* Replay mounts the strip again, so the loop starts from the first logo. */}
      <LogoMarquee key={replay} logos={LOGOS} renderLogo={wordmark} />
    </div>
  );
}