import React, { useContext } from "react";

import classNames from "classnames";
import styles from "./ThumbnailSignpost.module.css";

import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";

import { Image, type ImageProps } from "@arc-ui/components/Image";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { Heading } from "@arc-ui/components/Heading";
import { SurfaceContext } from "@arc-ui/components/Surface";

/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
export const ThumbnailSignpost = ({
  text,
  title,
  img,
  onClick,
  buttonLabel,
  ...props
}: ThumbnailSignpostProps) => {
  const { surface } = useContext(SurfaceContext);
  const isDarkSurface = surface === "dark";

  return (
    <div
      className={classNames(styles.thumbnailSignpost, {
        [styles.isLink]: onClick,
        [styles.onDarkSurface]: isDarkSurface,
      })}
      onClick={onClick}
      aria-label={title}
      tabIndex={onClick ? 0 : -1}
      {...(onClick && { role: "button" })}
      {...filterAttrs(props)}
    >
      {img && (
        <div className={styles.image}>
          <Image {...img} />
        </div>
      )}
      <div className={styles.content}>
        <span className={styles.heading}>{title}</span>
        <VerticalSpace size="8" />
        {text}
        {buttonLabel && onClick && (
          <>
            <VerticalSpace size="32" />
            <div className={styles.thumbnailButton}>
              <span
                className={styles.buttonIcon}
                role="img"
                style={{
                  height: 24,
                  width: 24,
                  maskImage: `url("${BtIconArrowRightFill}")`,
                  WebkitMaskImage: `url("${BtIconArrowRightFill}")`,
                }}
              />
              <Heading size="xxs">{buttonLabel}</Heading>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export interface ThumbnailSignpostProps {
  /**
   * Title for the ThumbnailSignpost.
   */
  title: string;

  /**
   * Text content for the ThumbnailSignpost.
   */
  text: string;

  /**
   * Label for the button in the ThumbnailSignpost.
   */
  buttonLabel?: string;

  /**
   * Image properties for the ThumbnailSignpost.
   */
  img?: Pick<
    ImageProps,
    | "src"
    | "alt"
    | "loading"
    | "sizes"
    | "srcSet"
    | "anchor"
    | "fadeOnLoad"
    | "fetchPriority"
  >;
  /**
   * Optional click handler for the ThumbnailSignpost.
   */
  onClick?: () => void;
}