import React from "react";
import { HelpCircle, Mail, Phone, Send, MessageSquare } from "lucide-react";

const HelpSupport: React.FC = () => {
  return (
    <div className="flex flex-col gap-2 max-h-screen">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h2 className="text-md font-bold flex items-center gap-2">
           Help & Support
        </h2>
      </div>

      {/* Contact Info */}
      <div className="card bg-base-100 border border-base-300 shadow-sm p-4">
        <h3 className="text-md font-semibold mb-2">Need Assistance?</h3>
        <p className="text-sm text-base-content/70">
          We're here to help! If you’re facing any issues, please reach out to our support team.
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-3">
          <div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
            <Mail size={18} className="text-primary" />
            <div>
              <p className="text-xs text-base-content/70">Email</p>
              <p className="font-medium text-sm">support@docva.com</p>
            </div>
          </div>

          <div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
            <Phone size={18} className="text-primary" />
            <div>
              <p className="text-xs text-base-content/70">Phone</p>
              <p className="font-medium text-sm">+XXXX XXXXX</p>
            </div>
          </div>

          <div className="flex items-center gap-3 border border-base-300 rounded-lg p-3 bg-base-200/40">
            <MessageSquare size={18} className="text-primary" />
            <div>
              <p className="text-xs text-base-content/70">Chat</p>
              <p className="font-medium text-sm">Available 9 AM - 6 PM</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HelpSupport;