import { ExternalLink } from '../../../lib/icons'
import { Section, Row } from '../_ui'

export function AboutSection() {
  return (
    <Section id="about" title="About" description="Build info and useful links">
      <Row label="Version">
        <span className="text-[12px] text-text-2 font-mono tabular-nums">0.1.0</span>
      </Row>
      <Row label="License">
        <span className="text-[12px] text-text-2 font-mono">GPL-2.0</span>
      </Row>
      <Row label="Source">
        <a
          href="https://github.com/jellyfin/jellyfin"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-[12px] text-accent hover:text-accent-hover transition-colors font-medium"
        >
          jellyfin/jellyfin
          <ExternalLink size={11} />
        </a>
      </Row>
      <Row label="Documentation">
        <a
          href="https://jellyfin.org/docs/"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-[12px] text-accent hover:text-accent-hover transition-colors font-medium"
        >
          jellyfin.org
          <ExternalLink size={11} />
        </a>
      </Row>
    </Section>
  )
}
