import { TopicTag } from "./TopicTag";
import { Sparkles } from "lucide-react";

export function DevotionalMessageCard({
  text,
  topics = [],
  date,
}: {
  text: string;
  topics?: string[];
  date?: string;
}) {
  return (
    <section
      aria-label="Today's Message"
      className="relative overflow-hidden rounded-2xl border border-[var(--gold)]/30 bg-card p-7 shadow-soft sm:p-9"
      style={{
        backgroundImage:
          "linear-gradient(180deg, color-mix(in oklab, var(--gold) 6%, transparent), transparent 60%)",
      }}
    >
      <div className="flex items-center justify-between gap-4">
        <p className="inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
          <Sparkles className="h-3.5 w-3.5 text-[var(--gold)]" />
          Today's Message
        </p>
        {date && (
          <span className="text-xs text-muted-foreground">
            {new Date(date).toLocaleDateString(undefined, {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </span>
        )}
      </div>
      <p className="mt-4 text-[17px] leading-relaxed text-foreground/90 sm:text-lg">
        {text}
      </p>
      {topics.length > 0 && (
        <div className="mt-5 flex flex-wrap gap-2">
          {topics.slice(0, 6).map((t) => (
            <TopicTag key={t} topic={t} />
          ))}
        </div>
      )}
    </section>
  );
}