'use client';

import type { ReactNode } from 'react';

import { useTranslations } from 'next-intl';

import Section from '@/components/common/Section';
import { Button } from '@/components/ui/button';
import { Eyebrow, Heading, Text } from '@/components/ui/typography';

/* ============================================================================
   CONTRIBUTE BAND  —  the crowdsourcing CTA strip on the work page.
   ----------------------------------------------------------------------------
   A slim ink band, NOT a full section: a secondary prompt asking the public to
   help fill out the record. Sits between the catalogue body and the
   recommendations rail.
   ========================================================================== */

export interface ContributeBandProps {
  onContribute?: () => void;
}

const ContributeBand: React.FC<ContributeBandProps> = ({ onContribute }) => {
  const t = useTranslations('contribute');
  const em = (chunks: ReactNode) => <em>{chunks}</em>;

  return (
    <Section
      surface="ink"
      spacing="compact"
      innerClassName="flex flex-wrap items-center justify-between gap-x-[clamp(24px,5vw,72px)] gap-y-6"
    >
      <div className="grid min-w-0 max-w-[625px] gap-1.5">
        <Eyebrow tone="accent" className="flex items-center gap-2.5">
          {t('eyebrow')}
        </Eyebrow>

        {/* one-off title: a tier below pageTitle, slab + sentence case —
            it's a CTA headline, not the document's name. */}
        <Heading as="h2" variant="subsectionTitle" className="">
          {t('title')}
        </Heading>

        <Text
          variant="bodySm"
          // inverse "soft" tone — no token below inverseMuted, so spelled here
          className="mt-px text-brand-secondary/55 [&_em]:font-semibold [&_em]:not-italic [&_em]:text-brand-secondary/90"
        >
          {t.rich('full', { em })}
        </Text>
      </div>

      <div className="flex flex-none flex-wrap gap-3 max-sm:w-full">
        <Button inverted line onClick={onContribute}>
          {t('openButton')}
        </Button>
      </div>
    </Section>
  );
};

export default ContributeBand;