shopify-template/components/shopify/collection-card.tsx

import React from 'react';
import Link from 'next/link';
import { Card, CardContent } from '@/components/ui/card';

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="group block h-full"
    >
      <div className="card-modern bg-card rounded-3xl overflow-hidden h-full flex flex-col shadow-sm">
        {/* Collection Image */}
        <div className="aspect-[16/10] relative overflow-hidden bg-zinc-100">
          {collection.image ? (
            <img
              src={collection.image.url}
              alt={collection.image.altText || collection.title}
              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
            />
          ) : (
            <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-300">
              <i className="ri-folder-line text-8xl mb-4"></i>
              <span className="text-xs tracking-widest font-mono">
                COLLECTION
              </span>
            </div>
          )}

          <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30"></div>
        </div>

        {/* Collection Info */}
        <div className="p-8 flex flex-col flex-1">
          <h3 className="font-heading text-3xl font-semibold tracking-tighter text-foreground mb-4 group-hover:text-primary transition-colors">
            {collection.title}
          </h3>

          {collection.description && (
            <p className="text-muted-foreground text-[15px] leading-relaxed line-clamp-3 flex-1">
              {collection.description}
            </p>
          )}

          <div className="mt-8 flex items-center text-sm font-semibold text-primary group-hover:gap-x-2 transition-all">
            EXPLORE COLLECTION
            <i className="ri-arrow-right-line ml-2 text-base transition-transform group-hover:translate-x-0.5"></i>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default CollectionCard;