import { SvgDiagonalLineArrowUpperRight } from '@chainlink/blocks-icons'
import { Typography } from '../../components/Typography'

export type SourceLinkItem = {
  label: string
  href: string
}

export type SourceLinksProps = {
  links: SourceLinkItem[]
}

export const SourceLinks = ({ links }: SourceLinksProps) => {
  if (!links || links.length === 0) {
    return null
  }

  return (
    <div className="flex flex-wrap items-center gap-4">
      {links.map((link) => (
        <a
          key={link.href}
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
          className="group inline-flex items-center gap-1"
        >
          <Typography
            variant="body-semi-xs"
            color="secondary"
            className="!mb-2 !mt-0 transition-colors group-hover:text-link"
          >
            {link.label}
          </Typography>
          <SvgDiagonalLineArrowUpperRight
            className="text-icon-secondary mt-[-8px] size-2 transition-colors group-hover:text-link"
            aria-hidden="true"
          />
        </a>
      ))}
    </div>
  )
}