import React from 'react';
import { Stethoscope, ShieldAlert, Target, BookOpen } from 'lucide-react';

const PROTOCOL_DATA = [
  {
    mutation: 'KRAS G12C',
    indication: 'Non-Small Cell Lung Cancer (NSCLC)',
    firstLine: 'Sotorasib 960mg QD',
    mechanism: 'Irreversible KRAS G12C Inhibitor',
    toxicity: 'High GI/Hepatic Risk'
  },
  {
    mutation: 'EGFR L858R / T790M',
    indication: 'NSCLC / EGFR+ Adenocarcinoma',
    firstLine: 'Osimertinib 80mg QD',
    mechanism: '3rd Gen EGFR-TKI',
    toxicity: 'Cardio/Dermatological Risk'
  },
  {
    mutation: 'ALK / EML4 Fusion',
    indication: 'ALK+ NSCLC',
    firstLine: 'Alectinib 600mg BID',
    mechanism: 'Highly Selective ALK Inhibitor',
    toxicity: 'Edema / Bradycardia Risk'
  },
  {
    mutation: 'BRAF V600E',
    indication: 'Melanoma / Colorectal',
    firstLine: 'Dabrafenib + Trametinib',
    mechanism: 'BRAF/MEK Dual Inhibition',
    toxicity: 'Pyrexia / Skin Toxicity'
  }
];

const ProtocolsView: React.FC = () => {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="pb-6 border-b border-slate-800">
        <div className="flex items-center gap-3">
          <Stethoscope className="w-6 h-6 text-gemini-500" />
          <h2 className="text-2xl font-black italic uppercase tracking-tighter text-slate-100">
            Therapeutic Protocol Matrix
          </h2>
        </div>
        <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-2">
          Evidence-Based Mapping | Version 15.0.0 | Peer-Reviewed Guidelines
        </p>
      </header>

      <div className="grid gap-4">
        {PROTOCOL_DATA.map((item, idx) => (
          <div key={idx} className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 hover:border-gemini-500/30 transition-all group">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-center">
              
              <div className="space-y-1">
                <div className="flex items-center gap-2 text-gemini-500">
                  <Target className="w-4 h-4" />
                  <span className="text-[10px] font-black uppercase tracking-widest">Molecular Driver</span>
                </div>
                <h4 className="text-lg font-black text-slate-100 tracking-tight">{item.mutation}</h4>
                <p className="text-[10px] text-slate-500 font-bold uppercase">{item.indication}</p>
              </div>

              <div className="space-y-1">
                <div className="flex items-center gap-2 text-slate-400">
                  <BookOpen className="w-4 h-4" />
                  <span className="text-[10px] font-black uppercase tracking-widest">Intervention</span>
                </div>
                <p className="text-sm font-mono text-slate-200">{item.firstLine}</p>
                <p className="text-[10px] text-slate-600 italic uppercase">{item.mechanism}</p>
              </div>

              <div className="space-y-1">
                <div className="flex items-center gap-2 text-amber-500/70">
                  <ShieldAlert className="w-4 h-4" />
                  <span className="text-[10px] font-black uppercase tracking-widest">Safety Profile</span>
                </div>
                <p className="text-[10px] font-bold text-slate-400 uppercase leading-relaxed">
                  {item.toxicity}
                </p>
              </div>

              <div className="flex justify-end">
                <button className="px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-300 transition-all">
                  View Detail
                </button>
              </div>

            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProtocolsView;