"use client";

import Link from "next/link";
import Image from "next/image";
import { useCardImage, type ArtistCardProps } from "./ArtistCard";

export function ArtistCardCompact({
  name,
  subtitle,
  image,
  href,
  label = "Artist",
  className = "",
}: ArtistCardProps) {
  const { src, onError } = useCardImage(image);

  return (
    <Link
      href={href}
      className={[
        "group relative z-10 flex h-16 items-center overflow-hidden rounded-lg bg-lightbg shadow-lg ring-1 ring-lightline dark:bg-darkbg dark:ring-darkline",
        "hover:text-trptkblue hover:ring-lightline-hover dark:hover:text-white dark:hover:ring-darkline-hover",
        "transition-color duration-300 ease-in-out",
        className,
      ].join(" ")}
      aria-label={name ? `${label}: ${name}` : label}
    >
      <div className="relative aspect-square h-full shrink-0">
        <Image
          src={src}
          alt={name ? `Photo of ${name}` : `${label} photo`}
          fill
          sizes="96px"
          className="rounded-lg object-cover"
          onError={onError}
        />
      </div>

      <div className="flex min-w-0 flex-1 flex-col justify-center p-3">
        <h3 className="truncate text-sm leading-snug">
          {name ?? `Untitled ${label.toLowerCase()}`}
        </h3>
        {subtitle && (
          <h4 className="mt-1 truncate text-xs leading-relaxed text-lightsec dark:text-darksec">
            {subtitle}
          </h4>
        )}
      </div>
    </Link>
  );
}