import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

type Action = { label: string; href: string };

export function ActionButtons({
  primary,
  secondary,
  className,
}: {
  primary: Action;
  secondary?: Action;
  className?: string;
}) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center gap-3 sm:flex-row',
        className,
      )}
    >
      <Button
        asChild
        size="lg"
        className="h-11 rounded-full bg-foreground px-6 text-[15px] text-background hover:bg-foreground/90"
      >
        <a href={primary.href}>{primary.label}</a>
      </Button>
      {secondary && (
        <Button
          asChild
          size="lg"
          variant="outline"
          className="h-11 rounded-full border-foreground/20 bg-transparent px-6 text-[15px] text-foreground hover:bg-foreground/5 hover:text-foreground"
        >
          <a href={secondary.href}>{secondary.label}</a>
        </Button>
      )}
    </div>
  );
}