import { Calendar, Mail, MapPin, Phone } from "lucide-react";
import { contactAddress, contactEmail, contactPhoneDisplay } from "@/lib/contact";

const contactInfo = [
  { icon: Phone, label: "Call us", value: contactPhoneDisplay },
  { icon: Mail, label: "Email", value: contactEmail },
  { icon: MapPin, label: "Visit", value: contactAddress },
  { icon: Calendar, label: "Hours", value: "Mon-Sun - 7:00 - 22:00" },
];

export function ContactInfoCards() {
  return (
    <>
      {contactInfo.map(({ icon: Icon, label, value }) => (
        <div
          key={label}
          className="flex items-start gap-4 rounded-xl border border-border bg-card p-5"
        >
          <span className="grid h-11 w-11 place-items-center rounded-lg bg-primary text-primary-foreground shrink-0">
            <Icon className="h-5 w-5" />
          </span>
          <div>
            <p className="text-xs uppercase tracking-wider text-muted-foreground">{label}</p>
            <p className="mt-0.5 font-semibold">{value}</p>
          </div>
        </div>
      ))}
    </>
  );
}