import { HandMetal } from 'lucide-react';

import type { DashboardContentState } from '@/business/dashboard/types';
import { Button } from '@/components/ui/button';
import type { ModuleId } from '@/shared/types/app';
import type { DashboardSignOfWeek as DashboardSignOfWeekPayload } from '@/shared/types/dashboard';

interface DashboardSignOfWeekProps {
  readonly sign: DashboardSignOfWeekPayload | null;
  readonly state: DashboardContentState;
  readonly onNavigate: (module: ModuleId) => void;
}

export function DashboardSignOfWeek({
  sign,
  state,
  onNavigate,
}: DashboardSignOfWeekProps) {
  return (
    <section className="bg-gradient-to-br from-indigo-500/10 to-violet-500/10 rounded-2xl border border-indigo-500/20 p-5">
      <h3 className="font-semibold text-white mb-2 flex items-center gap-2">
        <HandMetal size={18} className="text-indigo-400" />
        Sign of the Week
      </h3>
      <div className="text-center">
        {state.isLoading ? (
          <p className="text-xs text-slate-400">Loading sign...</p>
        ) : state.isError ? (
          <p className="text-xs text-red-300">Sign of the week could not be loaded.</p>
        ) : sign ? (
          <>
            <div className="w-20 h-20 mx-auto rounded-2xl overflow-hidden mb-2 border-2 border-indigo-500/30 shadow-lg shadow-indigo-500/10">
              <img src={sign.image} alt={sign.alt} className="w-full h-full object-cover" />
            </div>
            <p className="font-bold text-indigo-400 text-lg">"{sign.word}"</p>
            <p className="text-xs text-slate-400 mt-1">{sign.description}</p>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => onNavigate('signs')}
              className="mt-2 h-auto px-2 py-1 text-xs text-indigo-400 hover:text-indigo-300 font-medium"
            >
              Learn more signs
            </Button>
          </>
        ) : (
          <p className="text-xs text-slate-400">No sign is published for this week.</p>
        )}
      </div>
    </section>
  );
}
