import { cn } from '@/utils/cn'
import Image from 'next/image'

type ImageWrapperProps = {
  src: string
  alt?: string
  isListing?: boolean
}

export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
  return (
    <figure className={cn('flex flex-col items-center gap-1 mb-4 w-full', isListing && 'h-60')}>
      <div className="border border-border rounded-xl w-full overflow-hidden flex-1">
        <div
          className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
          aria-hidden="true"
        >
          <div className="space-x-1">
            <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
            <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
            <span className="w-2 h-2 bg-border rounded-full inline-block"></span>
          </div>
          <span className="text-xs text-fg-dim font-mono">~/{src}</span>
        </div>
        <Image
          src={`/${src}`}
          alt={alt ?? ''}
          width={isListing ? 400 : 800}
          height={isListing ? 240 : 400}
          quality={isListing ? 75 : 100}
          priority={true}
          className="w-auto mx-auto object-cover h-full"
        />
      </div>
      {!isListing && alt && (
        <figcaption className="block text-xs text-fg-dim font-mono text-center">{alt}</figcaption>
      )}
    </figure>
  )
}