import { UploadImageFragment } from "graphql/generated";
import { ImageQuality } from "helpers/img";
import { Immutable } from "helpers/types";
import Link from "next/link";
import Chip from "./Chip";
import Img from "./Img";

interface Props {
  thumbnail?: UploadImageFragment | string | null | undefined;
  thumbnailAspectRatio?: string;
  href: string;
  pre_title?: string | null | undefined;
  title: string | null | undefined;
  subtitle?: string | null | undefined;
  topChips?: string[];
  bottomChips?: string[];
}

export default function PreviewLine(props: Immutable<Props>): JSX.Element {
  const {
    href,
    thumbnail,
    pre_title,
    title,
    subtitle,
    topChips,
    bottomChips,
    thumbnailAspectRatio,
  } = props;

  return (
    <Link href={href} passHref>
      <div
        className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
        hover:scale-[1.02] transition-transform flex flex-row gap-4
        overflow-hidden place-items-center pr-4 w-full h-36"
      >
        {thumbnail ? (
          <div className="h-full aspect-[3/2]">
            <Img image={thumbnail} quality={ImageQuality.Medium} />
          </div>
        ) : (
          <div style={{ aspectRatio: thumbnailAspectRatio }}></div>
        )}
        <div className="grid gap-2">
          {topChips && topChips.length > 0 && (
            <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
              {topChips.map((text, index) => (
                <Chip key={index}>{text}</Chip>
              ))}
            </div>
          )}
          <div className="flex flex-col my-1">
            {pre_title && <p className="leading-none mb-1">{pre_title}</p>}
            {title && (
              <p className="font-headers text-lg leading-none">{title}</p>
            )}
            {subtitle && <p className="leading-none">{subtitle}</p>}
          </div>
          {bottomChips && bottomChips.length > 0 && (
            <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
              {bottomChips.map((text, index) => (
                <Chip key={index} className="text-sm">
                  {text}
                </Chip>
              ))}
            </div>
          )}
        </div>
      </div>
    </Link>
  );
}