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>
  )
}