"use client";

import Link from "next/link";
import { Sparkles, ArrowRight } from "lucide-react";

interface AffirmationReminderProps {
  affirmations: { id: string; text: string }[];
}

export function AffirmationReminder({ affirmations }: AffirmationReminderProps) {
  if (affirmations.length === 0) return null;

  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-indigo-500/20 hover:shadow-[0_0_30px_-10px_rgba(99,102,241,0.1)]">
      {/* Background glow */}
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute -top-[50%] -left-[20%] w-[60%] h-[120%] rounded-full opacity-[0.04] blur-3xl"
          style={{ background: "radial-gradient(circle, #6366f1, transparent 70%)" }}
        />
        <div
          className="absolute -bottom-[30%] -right-[10%] w-[50%] h-[80%] rounded-full opacity-[0.03] blur-3xl"
          style={{ background: "radial-gradient(circle, #a855f7, transparent 70%)" }}
        />
      </div>

      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/10 ring-1 ring-indigo-500/10">
            <Sparkles className="h-4 w-4 text-indigo-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Glaubenss&auml;tze</h2>
            <p className="text-[10px] text-muted-foreground">
              Lies sie jeden Morgen und Abend
            </p>
          </div>
        </div>
        <Link
          href="/mindset"
          className="flex items-center gap-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-400 transition-colors"
        >
          Bearbeiten <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Affirmation list */}
      <div className="border-t border-border/50 p-4 space-y-2">
        {affirmations.slice(0, 5).map((aff, i) => (
          <div
            key={aff.id}
            className="flex items-start gap-3 rounded-xl bg-background/60 backdrop-blur-sm px-4 py-3 ring-1 ring-border/30 transition-all duration-200 hover:ring-border/60"
          >
            <span
              className="text-[11px] font-bold mt-0.5 w-5 h-5 rounded-md flex items-center justify-center shrink-0 bg-indigo-500/10 text-indigo-500"
            >
              {i + 1}
            </span>
            <p className="text-[13px] italic text-foreground/80 leading-relaxed">
              &ldquo;{aff.text}&rdquo;
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}