import { Quote, Sun } from 'lucide-react';

import type { DashboardContentState } from '@/business/dashboard/types';
import type { DashboardEncouragingQuote } from '@/shared/types/dashboard';

interface DashboardQuotePanelProps {
  readonly quote: DashboardEncouragingQuote | null;
  readonly state: DashboardContentState;
}

export function DashboardQuotePanel({ quote, state }: DashboardQuotePanelProps) {
  return (
    <section className="relative overflow-hidden bg-gradient-to-r from-violet-600/10 via-amber-500/10 to-emerald-500/10 rounded-2xl border border-violet-500/20 p-5 md:p-6">
      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-amber-400/10 to-transparent rounded-bl-full" />
      <div className="flex items-start gap-4">
        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-amber-500/30">
          <Sun size={22} className="text-white" />
        </div>
        <div className="min-w-0 flex-1">
          <h3 className="font-bold text-amber-400 text-sm uppercase tracking-wider flex items-center gap-2">
            <Quote size={14} />
            Encouraging Word of the Day
          </h3>
          {state.isLoading ? (
            <p className="text-slate-400 text-sm mt-2">Loading today's quote...</p>
          ) : state.isError ? (
            <p className="text-red-300 text-sm mt-2">Today's quote could not be loaded.</p>
          ) : quote ? (
            <>
              <p className="text-white text-base md:text-lg font-medium mt-2 leading-relaxed italic">
                "{quote.quote}"
              </p>
              <p className="text-slate-400 text-sm mt-2">{quote.author}</p>
            </>
          ) : (
            <p className="text-slate-400 text-sm mt-2">No quote is published for today.</p>
          )}
        </div>
      </div>
    </section>
  );
}
