import React from 'react';
import { Album } from "../data/albums"

interface AlbumArtworkProps {
  album: Album
  aspectRatio?: "portrait" | "square"
  width?: number
  height?: number
}

export function AlbumArtwork({
  album,
  aspectRatio = "portrait",
  width,
  height,
}: AlbumArtworkProps) {
  return (
    <div className="mr-4">
      <div className="overflow-hidden rounded-md">
        <img
          src={album.cover}
          alt={album.name}
          className={`object-cover transition-all hover:scale-105 ${aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"}`}
          style={{
            width: width,
            height: height,
          }}
        />
      </div>
      <div className="mt-2 space-y-1 text-sm">
        <h3 className="font-medium leading-none">{album.name}</h3>
        <p className="text-xs text-gray-500">{album.artist}</p>
      </div>
    </div>
  );
}