"use client";

import { panelDict } from "@/features/panel/dict";
import { useFeaturedQuote } from "@/features/quotes/hooks/use-quotes";

function StarIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-7 text-primary-foreground"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path d="M12 2l2.4 6.8H22l-5.8 4.2 2.2 6.8L12 17.8l-6.4 4.2 2.2-6.8L2 8.8h7.6L12 2z" />
    </svg>
  );
}

export function DashboardMotivationBanner() {
  const { data: quote } = useFeaturedQuote();

  const text = quote?.text ?? panelDict.motivationQuote;
  const subtext = quote?.subtext ?? panelDict.motivationSubtext;

  return (
    <section className="relative overflow-hidden rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -end-6 -top-6 size-24 rounded-full bg-primary/10"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -bottom-8 start-8 size-32 rounded-full bg-primary/5"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute end-16 top-4 text-primary/20"
      >
        ✦
      </div>

      <div className="relative flex items-center gap-4">
        <div className="inline-flex size-14 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary to-[#FFA500] shadow-soft-sm">
          <StarIcon />
        </div>

        <div className="min-w-0 flex-1 space-y-1">
          <p className="text-sm font-semibold leading-6 text-card-foreground sm:text-base">
            {text}
          </p>
          {subtext ? (
            <p className="text-xs text-muted-foreground sm:text-sm">{subtext}</p>
          ) : null}
        </div>
      </div>
    </section>
  );
}