"use client";

import { Mail, Phone, Headphones, ChevronRight } from "lucide-react";

export function SupportCard() {
  return (
    <div className="p-6 bg-white rounded-lg space-y-6">
      <p className="text-gray-800 font-medium">
        Our friendly support team is here to help you.
      </p>

      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-amber-50 rounded-full">
            <Mail className="h-5 w-5 text-amber-500" />
          </div>
          <div>
            <p className="text-sm font-medium">Email</p>
            <p className="text-sm text-gray-500">support@gmail.com</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="p-2 bg-amber-50 rounded-full">
            <Phone className="h-5 w-5 text-amber-500" />
          </div>
          <div>
            <p className="text-sm font-medium">Call</p>
            <p className="text-sm text-gray-500">+61 98758453</p>
          </div>
        </div>

        <button className="w-full flex items-center justify-between py-2 hover:bg-gray-50 rounded-lg transition-colors">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-amber-50 rounded-full">
              <Headphones className="h-5 w-5 text-amber-500" />
            </div>
            <span className="text-sm font-medium">Contact us</span>
          </div>
          <ChevronRight className="h-4 w-4 text-gray-400" />
        </button>
      </div>
    </div>
  );
}