import { PhotoWithFallback } from '../elements';
import type { Location } from '../../types/api/location';

interface LocationGridProps {
  locations?: Location[] | null;
  title?: string;
}

export const LocationGrid = ({
  locations: locationsData,
  title = "",
}: LocationGridProps) => {
  const locations = Array.isArray(locationsData) ? locationsData : [];

  return (
    <section>
      <div className="mx-auto max-w-container px-4 md:px-8">
        <div className="mb-12 text-center">
          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
            {title}
          </h2>
        </div>

        {locations.length > 0 ? (
          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
            {locations.map((location) => (
              <div key={location.id} className="flex flex-col">
                <div className="w-full h-64 mb-6 overflow-hidden">
                  <PhotoWithFallback
                    item={location}
                    fallbackId={location.id}
                    className="w-full h-full object-cover"
                  />
                </div>
                
                <h3 className="font-display text-2xl font-normal text-fg-primary mb-2">
                  {location.name}
                </h3>
                
                {location.city && location.state && (
                  <p className="font-body text-base text-tertiary mb-4">
                    {location.city}, {location.state}
                  </p>
                )}
                
                <a
                  href={`/locations/${location.slug}`}
                  className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
                  style={{ color: 'var(--color-text-brand-accent)' }}
                >
                  Discover more
                </a>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <p className="font-body text-base text-tertiary">No locations available</p>
          </div>
        )}
      </div>
    </section>
  );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('location-grid', 'aman', LocationGrid);
