import React from 'react';
import Link from 'next/link';

interface CollectionImage {
  url: string;
  altText?: string;
}

interface Collection {
  id: string;
  title: string;
  handle: string;
  description?: string;
  image?: CollectionImage;
}

interface CollectionCardProps {
  collection: Collection;
}

const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
  return (
    <Link href={`/collections/${collection.handle}`} className="block group">
      {/* Collection Image */}
      <div className="aspect-video overflow-hidden bg-gray-100">
        {collection.image ? (
          <img
            src={collection.image.url}
            alt={collection.image.altText || collection.title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-gray-400">
            <i className="ri-folder-line text-6xl"></i>
          </div>
        )}
      </div>

      {/* Collection Info */}
      <div className="mt-3">
        <h3 className="text-base font-medium text-gray-900 font-heading">
          {collection.title}
        </h3>
      </div>
    </Link>
  );
};

export default CollectionCard;