import { cn } from "@/lib/utils"

interface NoteImagesProps {
  images: string[]
  title?: string | null
}

export function NoteImages({ images, title }: NoteImagesProps) {
  if (!images || images.length === 0) return null

  return (
    <div className={cn(
      "mb-3 -mx-4",
      !title && "-mt-4"
    )}>
      {images.length === 1 ? (
        <img 
          src={images[0]} 
          alt="" 
          className="w-full h-auto rounded-lg"
        />
      ) : images.length === 2 ? (
        <div className="grid grid-cols-2 gap-2 px-4">
          {images.map((img, idx) => (
            <img 
              key={idx}
              src={img} 
              alt="" 
              className="w-full h-auto rounded-lg"
            />
          ))}
        </div>
      ) : images.length === 3 ? (
        <div className="grid grid-cols-2 gap-2 px-4">
          <img 
            src={images[0]} 
            alt="" 
            className="col-span-2 w-full h-auto rounded-lg"
          />
          {images.slice(1).map((img, idx) => (
            <img 
              key={idx}
              src={img} 
              alt="" 
              className="w-full h-auto rounded-lg"
            />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-2 px-4">
          {images.slice(0, 4).map((img, idx) => (
            <img 
              key={idx}
              src={img} 
              alt="" 
              className="w-full h-auto rounded-lg"
            />
          ))}
          {images.length > 4 && (
            <div className="absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs">
              +{images.length - 4}
            </div>
          )}
        </div>
      )}
    </div>
  )
}