import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'

import styles from './linkListItem.module.css'
import {
  IllustrationIcon,
  IllustrationIconProps,
} from '../LinkListItem/IllustrationIcon'

import { cx } from 'class-variance-authority'
import { Link } from 'react-aria-components'

export interface LinkListItemProps {
  text: string
  isExternal?: boolean
  href: string
  className?: string
  illustration?: IllustrationIconProps
  onClick?: () => void
}

export function LinkListItem({
  text,
  isExternal,
  href,
  illustration,
  onClick,
}: LinkListItemProps) {
  return (
    <Link
      href={href}
      target="_blank"
      onClick={onClick}
      className={cx(styles.content, {
        [styles.graphic]: illustration,
        [styles.noGraphic]: !illustration,
      })}
    >
      {illustration && (
        <div className={styles.illustrationWrapper}>
          <IllustrationIcon
            illustration={illustration.illustration}
            size={illustration.size}
            className={styles.illustration}
          />
        </div>
      )}
      <Typography variant="Body/Paragraph/mdBold">
        <p>{text}</p>
      </Typography>
      <MaterialIcon
        color="Icon/Interactive/Default"
        icon={isExternal ? 'open_in_new' : 'arrow_forward'}
      />
    </Link>
  )
}