"use client";

/**
 * VaniOfTheDayCTA — a home-page card suggesting the day's "Vāṇī of the Day":
 * one prose chapter, verse, or lecture chosen by the backend (the same for
 * everyone that day, never repeating within 90 days). Tapping it opens the
 * item. Renders nothing until/unless the pick loads, so it never leaves an
 * empty frame. Styled to match SadhnaStreakCTA.
 */

import { useEffect, useState } from "react";
import Link from "next/link";
import { ChevronRight, Quote } from "lucide-react";
import { getVaniOfTheDay, type Vani } from "@/lib/vani";

export function VaniOfTheDayCTA() {
  const [vani, setVani] = useState<Vani | null>(null);

  useEffect(() => {
    let cancelled = false;
    getVaniOfTheDay()
      .then((v) => {
        if (!cancelled) setVani(v);
      })
      .catch(() => {
        /* card simply doesn't render */
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (!vani) return null;

  return (
    <Link
      href={vani.href}
      className="group flex w-full max-w-md items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40"
    >
      <span className="inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
        <Quote className="size-6" />
      </span>
      <div className="min-w-0 flex-1">
        <p className="flex items-center gap-1.5 text-[0.7rem] font-medium uppercase tracking-[0.14em] text-primary">
          Vāṇī of the day
          <span className="rounded bg-muted px-1.5 py-0.5 text-[0.65rem] tracking-normal text-muted-foreground">
            {vani.label}
          </span>
        </p>
        <p className="mt-0.5 truncate text-base font-semibold text-foreground leading-snug">
          {vani.title}
        </p>
        {vani.subtitle ? (
          <p className="truncate text-sm text-muted-foreground leading-snug">
            {vani.subtitle}
          </p>
        ) : null}
      </div>
      <ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
    </Link>
  );
}