shopify-template/components/shopify/collections.tsx

'use client';

import React from 'react';
import { useCollections } from '@/hooks/use-shopify-collections';
import CollectionCard from './collection-card';
import { Button } from '@/components/ui/button';

interface CollectionsProps {
  title?: string;
}

const Collections: React.FC<CollectionsProps> = ({
  title = 'Our Collections',
}) => {
  const { collections, loading, error, refetch } = useCollections(12);

  if (loading) {
    return (
      <div className="py-20">
        <div className="max-w-screen-2xl mx-auto px-8">
          <div className="flex justify-center mb-6">
            <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
              EXPLORE
            </div>
          </div>
          <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
            {title}
          </h2>
          <p className="text-center text-muted-foreground max-w-md mx-auto mb-16">
            Handpicked stories and themes
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {Array.from({ length: 6 }).map((_, index) => (
              <div
                key={index}
                className="bg-white rounded-3xl overflow-hidden animate-pulse border border-border h-[520px]"
              >
                <div className="h-80 bg-zinc-100"></div>
                <div className="p-10 space-y-4">
                  <div className="h-8 bg-zinc-200 rounded-xl w-3/4"></div>
                  <div className="h-4 bg-zinc-200 rounded w-full"></div>
                  <div className="h-4 bg-zinc-200 rounded w-5/6"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="py-20">
        <div className="max-w-screen-2xl mx-auto px-8 text-center">
          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
            {title}
          </h2>
          <div className="mx-auto max-w-sm bg-white border border-border rounded-3xl p-10">
            <i className="ri-alert-line text-5xl text-rose-500 mb-4"></i>
            <h3 className="text-xl font-semibold mb-2">
              Unable to load collections
            </h3>
            <p className="text-muted-foreground mb-6">{error}</p>
            <Button onClick={refetch} variant="outline" className="btn-modern">
              Retry
            </Button>
          </div>
        </div>
      </div>
    );
  }

  if (collections.length === 0) {
    return (
      <div className="py-20 bg-zinc-50">
        <div className="max-w-screen-2xl mx-auto px-8 text-center">
          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
            {title}
          </h2>
          <div className="mx-auto max-w-md p-12">
            <i className="ri-folder-open-line text-6xl text-muted-foreground mb-6"></i>
            <h3 className="text-2xl font-semibold mb-3">
              No collections found
            </h3>
            <p className="text-muted-foreground">
              Collections will appear here once added to your Shopify store.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="py-20">
      <div className="max-w-screen-2xl mx-auto px-8">
        <div className="flex justify-center mb-6">
          <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
            THEMES &amp; STORIES
          </div>
        </div>
        <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
          {title}
        </h2>
        <p className="text-center text-muted-foreground max-w-md mx-auto mb-16 text-lg">
          Discover our carefully crafted worlds
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {collections.map((collection) => (
            <CollectionCard key={collection.id} collection={collection} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Collections;