import { Button } from './Button'
import { Icon } from './Icon'

type RightRailProps = { sections: string[] }

export function RightRail({ sections }: RightRailProps) {
  return (
    <aside className="right-rail">
      <div className="rail-card">
        <span className="eyebrow">On this page</span>
        {sections.map((label, i) => (
          <a className={i === 0 ? 'rail-link active' : 'rail-link'} href={i === 0 ? '#button-matrix' : '#'} key={label}>
            <span>0{i + 1}</span>
            {label}
          </a>
        ))}
      </div>

      <div className="rail-card release">
        <div className="release-icon">
          <Icon name="layers" size={18} />
        </div>
        <strong>Designed to be extended</strong>
        <p>Bring your brand, keep the rhythm. Tokens are portable and components stay unopinionated.</p>
        <button className="text-button">
          Read the docs <Icon name="arrow" size={14} />
        </button>
      </div>

      <div className="rail-card">
        <span className="eyebrow">Need a hand?</span>
        <p className="rail-copy">Check the contribution guide or say hello in the community.</p>
        <Button variant="secondary" className="full">
          Open community <span>↗</span>
        </Button>
      </div>
    </aside>
  )
}