"use client";

import { AlertTriangle, Info, Clock, Calendar } from "lucide-react";
import { MedicalAlert as MedicalAlertType } from "./types";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import Link from "next/link";

interface MedicalAlertProps {
  alert: MedicalAlertType;
  className?: string;
  showAppointmentButton?: boolean;
}

const alertConfig = {
  NO_AGENDAR: {
    icon: Info,
    text: "Información general",
    description: "No requiere cita médica inmediata",
    className: "bg-muted border-muted-foreground/20 text-muted-foreground",
    iconClassName: "text-muted-foreground"
  },
  RECOMENDADO: {
    icon: Clock,
    text: "Consulta recomendada",
    description: "Se recomienda agendar una cita médica",
    className: "bg-yellow-50 border-yellow-200 text-yellow-800",
    iconClassName: "text-yellow-600"
  },
  URGENTE: {
    icon: AlertTriangle,
    text: "Atención urgente",
    description: "Requiere atención médica inmediata",
    className: "bg-red-500 border-red-600 text-white",
    iconClassName: "text-white"
  }
};

export const MedicalAlert = ({ alert, className, showAppointmentButton = true }: MedicalAlertProps) => {
  const config = alertConfig[alert];
  const Icon = config.icon;
  const shouldShowButton = showAppointmentButton && (alert === "RECOMENDADO" || alert === "URGENTE");

  return (
    <div className={cn(
      "flex items-center justify-between gap-3 px-4 py-3 rounded-lg border",
      config.className,
      className
    )}>
      <div className="flex items-center gap-3 flex-1">
        <Icon className={cn("h-5 w-5 flex-shrink-0", config.iconClassName)} />
        <div className="flex-1">
          <div className="font-semibold text-sm">{config.text}</div>
          <div className="text-xs opacity-80 mt-0.5">{config.description}</div>
        </div>
      </div>
      {shouldShowButton && (
        <Button
          asChild
          size="sm"
          variant={alert === "URGENTE" ? "destructive" : "default"}
          className="flex-shrink-0"
        >
          <Link href="/appointments">
            <Calendar className="h-4 w-4 mr-2" />
            Agendar Cita
          </Link>
        </Button>
      )}
    </div>
  );
};