'use client';

import { useLocale, useT } from '@/lib/i18n/react';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { NoDeals } from '@/components/ui/feedback/EmptyState/illustrations';
import { Button } from '@/components/ui/primitives/Button';
import { Image } from '@/components/ui/primitives/Image';
import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import type { Config } from './config';
import type { ClubStoriesData } from './loadData';

/**
 * ClubStories — horizontal scroll row of subscribed-club avatars with
 * pulse ring. Shown at the top of the club page.
 */
export function Component({ config, data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const t = useT('club_stories');
  const { clubs } = (data as ClubStoriesData | null) ?? { clubs: [] };

  const titleText = config.title ? config.title[locale] || config.title.he : t('title_default');

  const emptyLabel = config.emptyStateLabel[locale] || config.emptyStateLabel.he;

  if (clubs.length === 0) {
    return (
      <EmptyState
        illustration={<NoDeals />}
        title={emptyLabel}
        description={t('empty_desc')}
        action={
          <Button variant="ghost" size="sm" asChild>
            <a href="/stores">{t('empty_cta')}</a>
          </Button>
        }
      />
    );
  }

  return (
    <div className="bg-accent-soft-50 mx-6 rounded-2xl p-4">
      <section aria-label={titleText}>
        {titleText && <SectionHeader title={titleText} className="px-0" />}
        <div className="-mx-4 flex gap-3 overflow-x-auto px-4 pb-2">
          {clubs.map((club) => (
            <a
              key={club.id}
              href={`/business/${club.id}`}
              className="flex shrink-0 flex-col items-center gap-1"
            >
              {club.logoUrl ? (
                <Image
                  src={club.logoUrl}
                  alt={club.name}
                  width={64}
                  height={64}
                  loading="lazy"
                  className="border-mode-customer-400 h-16 w-16 rounded-full border-2 object-cover"
                />
              ) : (
                <span
                  aria-hidden
                  className="border-mode-customer-400 bg-surface-raised text-text-muted flex h-16 w-16 items-center justify-center rounded-full border-2 text-xl font-bold"
                >
                  {club.name.charAt(0)}
                </span>
              )}
              <span className="text-text-primary max-w-16 truncate text-center text-xs font-semibold">
                {club.name}
              </span>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}