Add button to share booking confirmation

apps/frontend/src/features/public-booking/components/share-whatsapp-button.tsx

@@ -0,0 +1,53 @@
+import type { PublicBookingConfirmation } from '@repo/api-contract'
+import { siWhatsapp } from 'simple-icons'
+import { Button } from '@/components/ui/button'
+
+type ShareWhatsappButtonProps = {
+  confirmation: PublicBookingConfirmation
+}
+
+function formatDateLabel(isoDate: string) {
+  const [year, month, day] = isoDate.split('-').map(Number)
+  const date = new Date(year, (month ?? 1) - 1, day ?? 1)
+
+  return new Intl.DateTimeFormat('es-AR', {
+    weekday: 'long',
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+  }).format(date)
+}
+
+function createWhatsappMessage(confirmation: PublicBookingConfirmation) {
+  const dateLabel = formatDateLabel(confirmation.date)
+  return [
+    'Ya reservamos cancha para jugar.',
+    `Complejo: ${confirmation.complexName}`,
+    `Cancha: ${confirmation.courtName} (${confirmation.sport.name})`,
+    `Fecha: ${dateLabel}`,
+    `Horario: ${confirmation.startTime} - ${confirmation.endTime}`,
+    `Codigo de reserva: ${confirmation.bookingCode}`,
+  ].join('\n')
+}
+
+export function ShareWhatsappButton({ confirmation }: ShareWhatsappButtonProps) {
+  const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(
+    createWhatsappMessage(confirmation),
+  )}`
+
+  return (
+    <Button type="button" variant="outline" className="h-11 w-full text-sm sm:text-base" asChild>
+      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
+        <svg
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          className="size-4"
+          style={{ color: `#${siWhatsapp.hex}` }}
+        >
+          <path d={siWhatsapp.path} fill="currentColor" />
+        </svg>
+        Compartir por WhatsApp
+      </a>
+    </Button>
+  )
+}