import Link from "next/link";
import { MessageCircle, MessageSquare, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "cn";
import { business, links } from "@/lib/site";

// Call / Text (and optionally WhatsApp and Get a quote) buttons.
// Use onDark over photos or the blue band, where the default styles lack contrast.
export default function ContactButtons({
  onDark = false,
  textLabel = "Text me",
  whatsapp = false,
  quoteHref,
  className,
}) {
  // Larger than shadcn's lg size: these are the main tap targets on phones.
  const base = "h-11 px-6 text-base";
  const secondary = onDark
    ? "border-white bg-transparent text-white hover:bg-white/10 hover:text-white"
    : "border-primary text-primary hover:text-primary";

  return (
    <div className={cn("flex flex-col gap-3 sm:flex-row sm:flex-wrap", className)}>
      <Button
        asChild
        size="lg"
        variant={onDark ? "secondary" : "default"}
        className={base}
      >
        <a href={links.tel}>
          <Phone aria-hidden="true" />
          Call {business.phone}
        </a>
      </Button>
      <Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
        <a href={links.sms}>
          <MessageSquare aria-hidden="true" />
          {textLabel}
        </a>
      </Button>
      {whatsapp && (
        <Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
          <a href={links.whatsapp}>
            <MessageCircle aria-hidden="true" />
            WhatsApp
          </a>
        </Button>
      )}
      {quoteHref && (
        <Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
          <Link href={quoteHref}>Get a quote</Link>
        </Button>
      )}
    </div>
  );
}