import type { BibleVerse } from "@/lib/api/bible.functions";
import { BookOpen } from "lucide-react";

export function BiblePassageCard({
  reference,
  translation = "KJV",
  verses,
  fullText,
  isLoading,
  error,
}: {
  reference: string;
  translation?: string;
  verses: BibleVerse[];
  fullText: string;
  isLoading?: boolean;
  error?: string | null;
}) {
  return (
    <section
      aria-label="Today's Scripture"
      className="relative overflow-hidden rounded-2xl border border-border bg-card p-7 shadow-soft sm:p-9"
    >
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
            <BookOpen className="h-3.5 w-3.5 text-[var(--gold)]" />
            Today's Scripture
          </p>
          <h2 className="mt-2 font-serif text-3xl font-semibold leading-tight text-primary sm:text-4xl">
            {reference}
          </h2>
        </div>
        <span className="shrink-0 rounded-full border border-border bg-secondary px-3 py-1 text-xs font-semibold uppercase tracking-wider text-primary/80">
          {translation}
        </span>
      </div>

      <div className="mt-6 border-l-2 border-[var(--gold)]/60 pl-5">
        {isLoading ? (
          <div className="space-y-2">
            <div className="h-4 w-full animate-pulse rounded bg-muted" />
            <div className="h-4 w-11/12 animate-pulse rounded bg-muted" />
            <div className="h-4 w-9/12 animate-pulse rounded bg-muted" />
          </div>
        ) : error || (!fullText && verses.length === 0) ? (
          <p className="font-serif text-base italic text-muted-foreground">
            Bible passage temporarily unavailable.
          </p>
        ) : verses.length > 0 ? (
          <p className="font-serif text-lg leading-loose text-foreground/90 sm:text-xl">
            {verses.map((v) => (
              <span key={v.verse}>
                <sup className="mr-1 align-super text-xs font-semibold text-[var(--gold)]">
                  {v.verse}
                </sup>
                {v.text.replace(/\s+/g, " ").trim()}{" "}
              </span>
            ))}
          </p>
        ) : (
          <p className="font-serif text-lg leading-loose text-foreground/90 sm:text-xl">
            {fullText}
          </p>
        )}
      </div>
    </section>
  );
}