"use client"

import { MessageCircle, AlertCircle } from "lucide-react"

export function ChatSelectHeader() {
  return (
    <div className="mb-6">
      <div className="bg-card rounded-xl p-6 border shadow-sm">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="flex items-center space-x-3 flex-1 min-w-0">
            <div className="w-10 h-10 flex-shrink-0 bg-primary rounded-lg flex items-center justify-center shadow-sm">
              <MessageCircle className="w-5 h-5 text-primary-foreground" />
            </div>
            <div className="min-w-0">
              <h1 className="text-xl font-bold text-foreground">
                ¿En qué podemos ayudarte hoy?
              </h1>
              <p className="text-sm text-muted-foreground">
                Elige el tipo de asistencia que necesitas
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Disclaimer */}
      <div className="mt-4 flex gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4 dark:border-yellow-400 dark:bg-yellow-200/20">
        <AlertCircle className="h-5 w-5 text-amber-700 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
        <div className="text-sm text-amber-900 dark:text-yellow-800">
          <strong>Importante:</strong> Estos servicios son para orientación inicial y no reemplazan
          la atención de profesionales de la salud. En caso de emergencia, contacta servicios médicos
          de inmediato.
        </div>
      </div>
    </div>
  )
}