import React from "react";
import { Button } from "../../button";
import { FullImageCardProps } from "./types";

import { Link } from "@shared/components/link";
import { NextImage } from "@shared/components/next-image";
import { Text } from "@shared/components/text";
import { cx } from "@shared/utils";

export const FullImageCard: React.FC<FullImageCardProps> = ({
  card,
  lgWidth,
  mdWidth,
}) => {
  const {
    anchorId = "FullImageCard",
    title,
    description,
    caption,
    image,
    cta,
    link,
    className,
    contentClassName,
    imageClassName,
    shadow = true,
  } = card;

  const target = cta || link;
  const href = target?.href;

  const renderImage = () => {
    if (!image?.href) return null;

    const img = (
      <NextImage
        src={image.href}
        alt={image.title ?? title ?? "card-image"}
        width={image.width || 400}
        height={image.height || 280}
        className="w-full"
      />
    );

    return href ? (
      <Link href={href} tabIndex={-1} target={target?.target}>
        {img}
      </Link>
    ) : (
      img
    );
  };

  const titleNode = title ? (
    <Text as="h3" className="body1 text-text xl:heading6">
      {title}
    </Text>
  ) : null;

  return (
    <section
      id={anchorId}
      className={cx(
        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
        shadow && "shadow-card",
        mdWidth,
        lgWidth,
        "w-full",
        className
      )}
      aria-labelledby={`card-title-${anchorId}`}
    >
      {image?.href ? (
        <div
          className={cx(
            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
            imageClassName
          )}
        >
          {renderImage()}
        </div>
      ) : null}
      <div
        className={cx(
          "flex h-full flex-col gap-4 p-6 md:p-8",
          contentClassName
        )}
      >
        <div className="flex flex-1 flex-col justify-between">
          <div>
            {href && titleNode ? (
              <Link
                href={href}
                target={target?.target}
                className="no-underline hover:underline"
              >
                {titleNode}
              </Link>
            ) : (
              titleNode
            )}
            {description ? (
              <Text as="p" className="body2 mt-4 text-text md:body1">
                {description}
              </Text>
            ) : null}
          </div>
          {caption ? (
            <Text as="p" className="footnote mt-5 text-text-secondary">
              {caption}
            </Text>
          ) : null}
        </div>
        {cta ? (
          <div className="mt-2 flex items-end">
            <Button
              linkVariant="unstyled"
              linkClassName="label1 flex items-center gap-2 text-text"
              {...cta}
              iconName="expand_circle_right"
              iconFill={1}
            />
          </div>
        ) : null}
      </div>
    </section>
  );
};

export default FullImageCard;