import AlertCircleIcon from "@/assets/icons/alert-circle.svg?react";
import type { DiagnosisItem } from "@/features/report/types/diagnosis";
import { problemDiagnosisSeverityDotClass } from "@/features/report/ui/diagnosis/severityDotClass";

export type ProblemDiagnosisCardProps = {
  item: DiagnosisItem;
  index: number;
};

export function ProblemDiagnosisCard({ item, index }: ProblemDiagnosisCardProps) {
  return (
    <article
      className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-6 relative overflow-hidden card-shadow animate-fade-in-up"
      style={{ animationDelay: `${index * 80}ms` }}
    >
      <div className="absolute top-4 right-4" aria-hidden>
        <span className={`block w-3 h-3 rounded-full ${problemDiagnosisSeverityDotClass(item.severity)}`} />
      </div>

      <div className="flex items-start gap-3 pr-6">
        <div className="shrink-0 w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center mt-0.5 [&_svg]:block">
          <AlertCircleIcon width={16} height={16} className="text-lavender-200" aria-hidden />
        </div>
        <div className="min-w-0">
          <p className="title-18 text-white mb-2 break-keep">{item.category}</p>
          <p className="body-14 text-lavender-200 leading-relaxed break-keep">{item.detail}</p>
        </div>
      </div>
    </article>
  );
}