import { FarmacoYAML } from './types';

interface DrugCardProps {
  farmaco: FarmacoYAML;
}

export function DrugCard({ farmaco }: DrugCardProps) {
  return (
    <div
      className={`p-4 rounded-lg border transition-all hover:shadow-md ${
        farmaco.critico
          ? 'bg-red-50/50 border-red-200 dark:bg-red-950/30 dark:border-red-800'
          : 'bg-card border-border'
      }`}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex items-center gap-2">
          <span className="text-lg">💊</span>
          <h4 className="font-semibold text-foreground">{farmaco.nombre}</h4>
        </div>
        {farmaco.critico && (
          <span className="px-2 py-0.5 text-xs font-medium bg-red-500 text-white rounded">
            CRÍTICO
          </span>
        )}
      </div>

      <div className="mt-3 space-y-2">
        <div className="flex items-center justify-between">
          <span className="text-xs text-muted-foreground">Dosis</span>
          <span className="text-sm font-mono font-semibold text-primary">{farmaco.dosis}</span>
        </div>
        
        {farmaco.via && (
          <div className="flex items-center justify-between">
            <span className="text-xs text-muted-foreground">Vía</span>
            <span className="text-sm text-foreground">{farmaco.via}</span>
          </div>
        )}
        
        {farmaco.intervalo && (
          <div className="flex items-center justify-between">
            <span className="text-xs text-muted-foreground">Intervalo</span>
            <span className="text-sm text-foreground">{farmaco.intervalo}</span>
          </div>
        )}
        
        {farmaco.indicacion && (
          <div className="pt-2 border-t border-border/50">
            <span className="text-xs text-muted-foreground block mb-1">Indicación</span>
            <p className="text-sm text-foreground">{farmaco.indicacion}</p>
          </div>
        )}
      </div>
    </div>
  );
}

interface DrugListProps {
  farmacos: FarmacoYAML[];
}

export function DrugList({ farmacos }: DrugListProps) {
  if (!farmacos || farmacos.length === 0) {
    return null;
  }

  return (
    <div className="space-y-3">
      <h3 className="font-semibold text-foreground flex items-center gap-2">
        <span>💊</span> Fármacos
      </h3>
      <div className="grid gap-3 md:grid-cols-2">
        {farmacos.map((farmaco, index) => (
          <DrugCard key={index} farmaco={farmaco} />
        ))}
      </div>
    </div>
  );
}