import type { Devotional } from "@/lib/devotional";
import { TopicTag } from "./TopicTag";
import { ShareButton } from "./ShareButton";
import { SaveButton } from "./SaveButton";

export function DevotionalCard({
  devotional,
  featured = false,
  compact = false,
}: {
  devotional: Devotional;
  featured?: boolean;
  compact?: boolean;
}) {
  const { scripture_reference, text, topics, date } = devotional;
  return (
    <article
      className={[
        "group relative overflow-hidden rounded-2xl border border-border bg-card shadow-soft transition",
        featured ? "p-8 sm:p-10" : "p-6",
        !featured && "hover:-translate-y-0.5 hover:shadow-glow",
      ].join(" ")}
    >
      {featured && (
        <div className="pointer-events-none absolute -top-12 -right-12 h-40 w-40 rounded-full bg-[var(--gold)]/15 blur-3xl" />
      )}
      {date && (
        <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
          {new Date(date).toLocaleDateString(undefined, {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </p>
      )}
      <h2
        className={[
          "font-serif font-semibold tracking-tight text-primary",
          featured ? "mt-2 text-3xl sm:text-4xl" : "mt-1 text-xl",
        ].join(" ")}
      >
        {scripture_reference}
      </h2>
      <p
        className={[
          "leading-relaxed text-foreground/85",
          featured ? "mt-5 text-lg" : "mt-3 text-[15px]",
          compact && "line-clamp-4",
        ].join(" ")}
      >
        {text}
      </p>
      {topics.length > 0 && (
        <div className="mt-5 flex flex-wrap gap-2">
          {topics.slice(0, compact ? 3 : 6).map((t) => (
            <TopicTag key={t} topic={t} />
          ))}
        </div>
      )}
      {featured && (
        <div className="mt-6 flex flex-wrap gap-2">
          <ShareButton reference={scripture_reference} text={text} />
          <SaveButton />
        </div>
      )}
    </article>
  );
}