"use client";

import type { MembershipInvitePreview } from "../../../../lib/create/membershipInvitePreview";

export function MembershipInvitePreviewCard({
  preview,
  fromYourRuleLabel,
  whoBelongsLabel,
  joiningLabel,
}: {
  preview: MembershipInvitePreview;
  fromYourRuleLabel: string;
  whoBelongsLabel: string;
  joiningLabel: string;
}) {
  return (
    <div className="flex w-full min-w-0 flex-col gap-[var(--space-300)]">
      <p className="text-small-label text-[var(--color-content-default-tertiary)]">
        {fromYourRuleLabel}
      </p>
      <div className="flex w-full min-w-0 flex-col gap-[var(--space-200)] rounded-[var(--radius-400)] bg-[var(--color-surface-invert-brand-teal)] p-[var(--space-500)] text-[var(--color-content-invert-primary)]">
        <p className="text-small-label text-[var(--color-content-invert-secondary)]">
          {preview.categoryName}
        </p>
        <p className="font-bricolage text-x-small-heading">
          {preview.title}
        </p>
        {preview.eligibility ? (
          <p className="text-small-paragraph">
            <span className="font-bold">{whoBelongsLabel}</span>
            {` ${preview.eligibility}`}
          </p>
        ) : null}
        {preview.joiningProcess ? (
          <p className="text-small-paragraph">
            <span className="font-bold">{joiningLabel}</span>
            {` ${preview.joiningProcess}`}
          </p>
        ) : null}
      </div>
    </div>
  );
}