import React from "react";
import "./u4.css";
import { useNavigate } from "react-router-dom";
import DecorLine from "../../components/DecorLine";
import LongButton from "../../components/LongButton";
import radio0 from "../../assets/radio-0.png";
import radio1 from "../../assets/radio-1.png";
interface testType {
  id: number;
  title: string;
  desc: string;
  taboo: string;
}

const U4: React.FC = () => {
  const navigate = useNavigate();
  const [test, setTest] = React.useState<testType[]>([]);
  const handleConfirm = () => {
    navigate("/UI6");
  };
  React.useEffect(() => {
    setTest([
      {
        id: 1,
        title: "乳腺 B 超",
        desc: "适合 40 岁",
        taboo: "无特别限制",
      },
      {
        id: 2,
        title: "乳腺钼靶",
        desc: "适合40岁以上",
        taboo: "孕期、哺乳期",
      },
    ]);
  }, []);
  const [selectedId, setSelectedId] = React.useState<number | null>(1);

  React.useEffect(() => {
    console.log("选择的项目", selectedId);
  }, [selectedId]);
  return (
    <div className="u4-root">
      <span className="u4-title">请确认体检选项</span>
      <DecorLine />

      <div className="u4-card-grid">
        {test.map((t) => (
          <div
            key={t.id}
            className="u4-card"
            onClick={() => setSelectedId(t.id)}
          >
            <div className="u4-card-header">
              <img
                className={
                  "u4-radio " + (selectedId === t.id ? "selected" : "")
                }
                src={selectedId === t.id ? radio1 : radio0}
                alt={selectedId === t.id ? "已选" : "未选"}
              />
              <div className="u4-card-title">{t.title}</div>
            </div>

            <div className="u4-card-body">
              <div className="u4-detail-row">
                <div className="u4-detail-bar" />
                <div className="u4-detail-text">{t.desc}</div>
              </div>
              <div className="u4-detail-row">
                <div className="u4-detail-bar" />
                <div className="u4-detail-text">禁忌：{t.taboo}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <span className="u4-subtitle">请根据自身状态选择合适的项目</span>

      <LongButton text="确认选择" onClick={handleConfirm} />
    </div>
  );
};

export default U4;