"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCart } from "@/context/CartContext";
import { STORE_INFO } from "@/data/storeInfo";
import { createOrderApi } from "@/lib/apiClient";
import {
  ShieldCheck,
  Truck,
  ArrowLeft,
  CreditCard,
  Smartphone,
  Tag,
  CheckCircle2,
  Lock,
  Gift,
  HelpCircle,
} from "lucide-react";

const SPANISH_PROVINCES = [
  "Alicante", "Valencia", "Castellón", "Madrid", "Barcelona", "Sevilla", "Málaga",
  "Murcia", "Zaragoza", "Baleares", "A Coruña", "Álava", "Albacete", "Almería",
  "Asturias", "Ávila", "Badajoz", "Burgos", "Cáceres", "Cádiz", "Cantabria",
  "Ciudad Real", "Córdoba", "Cuenca", "Girona", "Granada", "Guadalajara",
  "Gipuzkoa", "Huelva", "Huesca", "Jaén", "La Rioja", "Las Palmas", "León",
  "Lleida", "Lugo", "Navarra", "Ourense", "Palencia", "Pontevedra", "Salamanca",
  "Santa Cruz de Tenerife", "Segovia", "Soria", "Tarragona", "Teruel", "Toledo",
  "Valladolid", "Bizkaia", "Zamora"
];

const EU_COUNTRIES = [
  { code: "ES", name: "España (Península y Baleares)" },
  { code: "DE", name: "Alemania" },
  { code: "FR", name: "Francia" },
  { code: "IT", name: "Italia" },
  { code: "PT", name: "Portugal" },
  { code: "BE", name: "Bélgica" },
  { code: "NL", name: "Países Bajos" },
  { code: "LU", name: "Luxemburgo" },
];

export default function CheckoutPage() {
  const router = useRouter();
  const {
    cart,
    subtotal,
    shippingCost,
    discount,
    total,
    appliedCoupon,
    applyCoupon,
    removeCoupon,
    clearCart,
  } = useCart();

  // Form State
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    nif: "",
    address: "",
    city: "",
    province: "Alicante",
    postalCode: "",
    country: "España (Península y Baleares)",
    deliveryNotes: "",
    isGift: false,
    giftMessage: "",
    agreeTerms: true,
  });

  const [paymentMethod, setPaymentMethod] = useState<
    "Redsys (Tarjeta)" | "Bizum" | "PayPal" | "Apple Pay / Google Pay"
  >("Bizum");

  const [couponCode, setCouponCode] = useState("");
  const [couponMsg, setCouponMsg] = useState<{ text: string; isError: boolean } | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
  ) => {
    const { name, value, type } = e.target;
    if (type === "checkbox") {
      const { checked } = e.target as HTMLInputElement;
      setFormData((prev) => ({ ...prev, [name]: checked }));
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }));
    }
  };

  const handleApplyCoupon = (e: React.FormEvent) => {
    e.preventDefault();
    if (!couponCode.trim()) return;
    const res = applyCoupon(couponCode);
    setCouponMsg({ text: res.message, isError: !res.success });
    if (res.success) setCouponCode("");
  };

  const handleSubmitOrder = async (e: React.FormEvent) => {
    e.preventDefault();
    if (cart.length === 0) {
      setErrorMessage("Tu carrito está vacío. Añade productos antes de continuar.");
      return;
    }

    if (!formData.firstName || !formData.lastName || !formData.email || !formData.phone || !formData.address || !formData.postalCode || !formData.city) {
      setErrorMessage("Por favor, completa todos los campos obligatorios de entrega.");
      return;
    }

    setIsProcessing(true);
    setErrorMessage("");

    try {
      const orderPayload = {
        customer: {
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          phone: formData.phone,
          nif: formData.nif,
        },
        shippingAddress: {
          address: formData.address,
          city: formData.city,
          province: formData.province,
          postalCode: formData.postalCode,
          country: formData.country,
          deliveryNotes: formData.deliveryNotes,
        },
        items: cart.map((item) => ({
          id: item.product.id,
          name: item.product.name,
          weight: item.product.weight,
          price: item.product.price,
          quantity: item.quantity,
          thumbnail: item.product.thumbnail,
        })),
        subtotal,
        discount,
        couponCode: appliedCoupon?.code,
        shippingCost,
        total,
        paymentMethod,
        isGift: formData.isGift,
        giftMessage: formData.giftMessage,
      };

      const data = await createOrderApi(orderPayload);

      if (data.success && data.order) {
        clearCart();
        // Redirect to confirmation page
        router.push(`/order-confirmed?orderId=${data.order.id}&orderNumber=${data.order.orderNumber}`);
      } else {
        setErrorMessage(data.message || "Error al registrar el pedido.");
        setIsProcessing(false);
      }
    } catch (error) {
      console.error("Error al procesar el pedido:", error);
      setErrorMessage("Error de conexión al procesar el pago.");
      setIsProcessing(false);
    }
  };

  const [mounted, setMounted] = useState(false);
  React.useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div className="min-h-screen bg-stone-50/70 py-8 sm:py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Empty Cart View (only displayed if confirmed empty on client) */}
        <div
          id="ra-empty-cart-view"
          className={`max-w-md mx-auto my-12 bg-white rounded-3xl p-8 shadow-xl border border-stone-200 text-center space-y-4 ${
            mounted && cart.length === 0 ? "block" : "hidden"
          }`}
        >
          <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto text-amber-900">
            <ShoppingBagIcon className="w-8 h-8" />
          </div>
          <h1 className="font-serif text-2xl font-bold text-stone-900">
            Tu cesta está vacía
          </h1>
          <p className="text-stone-500 text-xs sm:text-sm">
            Para tramitar un pedido, añade primero panettones o dulces tradicionales a tu carrito.
          </p>
          <Link
            href="./"
            className="inline-flex items-center justify-center gap-2 w-full bg-amber-900 hover:bg-amber-950 text-amber-50 py-3 rounded-full font-bold text-xs uppercase tracking-wider transition"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Volver a la Tienda</span>
          </Link>
        </div>

        {/* Main Checkout View (always pre-rendered in static HTML) */}
        <div
          id="ra-checkout-content"
          className={`space-y-6 ${mounted && cart.length === 0 ? "hidden" : "block"}`}
        >
          {/* Checkout Header */}
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pb-6 mb-8 border-b border-stone-200">
            <div className="flex items-center gap-4">
              <Link href="./" className="shrink-0">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="../images/logo-transparent.png"
                  alt="Raúl Asencio"
                  className="h-9 sm:h-11 w-auto object-contain"
                />
              </Link>
              <div>
                <Link
                  href="./"
                  className="inline-flex items-center gap-1.5 text-xs font-semibold text-stone-500 hover:text-amber-900 transition mb-1"
                >
                  <ArrowLeft className="w-4 h-4" />
                  <span>Volver a la tienda</span>
                </Link>
                <h1 className="font-serif text-2xl sm:text-3xl font-bold text-stone-900">
                  Finalizar Compra Segura
                </h1>
              </div>
            </div>
            <div className="flex items-center gap-3 text-xs text-stone-500 bg-white px-3.5 py-2 rounded-full border border-stone-200 shadow-2xs">
              <Lock className="w-4 h-4 text-emerald-600" />
              <span>Pasarela encriptada SSL 256-bit</span>
            </div>
          </div>

          {errorMessage && (
            <div className="mb-6 p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-medium flex items-center gap-2">
              <span>⚠️ {errorMessage}</span>
            </div>
          )}

          <form id="ra-checkout-form" onSubmit={handleSubmitOrder} className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          
          {/* Left Column: Customer & Delivery Details */}
          <div className="lg:col-span-7 space-y-6">
            
            {/* 1. Contact Information */}
            <div className="bg-white rounded-2xl p-6 border border-stone-200 shadow-2xs space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="font-serif text-lg font-bold text-stone-900 flex items-center gap-2">
                  <span className="w-6 h-6 rounded-full bg-amber-900 text-white text-xs flex items-center justify-center font-sans">
                    1
                  </span>
                  <span>Datos de Contacto</span>
                </h2>
                <span className="text-xs text-stone-400">* Campos obligatorios</span>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Nombre *
                  </label>
                  <input
                    type="text"
                    name="firstName"
                    required
                    value={formData.firstName}
                    onChange={handleInputChange}
                    placeholder="Tu nombre"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Apellidos *
                  </label>
                  <input
                    type="text"
                    name="lastName"
                    required
                    value={formData.lastName}
                    onChange={handleInputChange}
                    placeholder="Tus apellidos"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Correo Electrónico * (Para confirmación y factura)
                  </label>
                  <input
                    type="email"
                    name="email"
                    required
                    value={formData.email}
                    onChange={handleInputChange}
                    placeholder="ejemplo@correo.es"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Teléfono Móvil * (Para el repartidor)
                  </label>
                  <input
                    type="tel"
                    name="phone"
                    required
                    value={formData.phone}
                    onChange={handleInputChange}
                    placeholder="600 000 000"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div className="sm:col-span-2">
                  <label className="block font-semibold text-stone-700 mb-1">
                    DNI / NIF (Opcional, para emitir factura fiscal con IVA desglosado)
                  </label>
                  <input
                    type="text"
                    name="nif"
                    value={formData.nif}
                    onChange={handleInputChange}
                    placeholder="12345678Z"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700 uppercase"
                  />
                </div>
              </div>
            </div>

            {/* 2. Shipping Address */}
            <div className="bg-white rounded-2xl p-6 border border-stone-200 shadow-2xs space-y-4">
              <h2 className="font-serif text-lg font-bold text-stone-900 flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-amber-900 text-white text-xs flex items-center justify-center font-sans">
                  2
                </span>
                <span>Dirección de Entrega</span>
              </h2>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div className="sm:col-span-2">
                  <label className="block font-semibold text-stone-700 mb-1">
                    Dirección completa (Calle, número, piso, puerta) *
                  </label>
                  <input
                    type="text"
                    name="address"
                    required
                    value={formData.address}
                    onChange={handleInputChange}
                    placeholder="Calle Mayor, 10, 2ºA"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Código Postal *
                  </label>
                  <input
                    type="text"
                    name="postalCode"
                    required
                    value={formData.postalCode}
                    onChange={handleInputChange}
                    placeholder="03680"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Ciudad / Población *
                  </label>
                  <input
                    type="text"
                    name="city"
                    required
                    value={formData.city}
                    onChange={handleInputChange}
                    placeholder="Aspe / Madrid / Barcelona..."
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    Provincia *
                  </label>
                  <select
                    name="province"
                    value={formData.province}
                    onChange={handleInputChange}
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700 bg-white"
                  >
                    {SPANISH_PROVINCES.map((p) => (
                      <option key={p} value={p}>
                        {p}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-stone-700 mb-1">
                    País de Envío *
                  </label>
                  <select
                    name="country"
                    value={formData.country}
                    onChange={handleInputChange}
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700 bg-white"
                  >
                    {EU_COUNTRIES.map((c) => (
                      <option key={c.code} value={c.name}>
                        {c.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="sm:col-span-2">
                  <label className="block font-semibold text-stone-700 mb-1">
                    Instrucciones de Entrega (Opcional)
                  </label>
                  <input
                    type="text"
                    name="deliveryNotes"
                    value={formData.deliveryNotes}
                    onChange={handleInputChange}
                    placeholder="Ej: Dejar en conserjería o llamar antes de entregar"
                    className="w-full border border-stone-300 rounded-lg p-2.5 outline-none focus:border-amber-700"
                  />
                </div>
              </div>

              {/* Gift Option Box */}
              <div className="pt-2 border-t border-stone-100">
                <label className="flex items-center gap-2 cursor-pointer text-xs font-semibold text-stone-800">
                  <input
                    type="checkbox"
                    name="isGift"
                    checked={formData.isGift}
                    onChange={handleInputChange}
                    className="rounded text-amber-900 focus:ring-amber-700 w-4 h-4"
                  />
                  <Gift className="w-4 h-4 text-amber-800" />
                  <span>¿Es un regalo? (Incluiremos tarjeta con tu dedicatoria sin ticket con precio)</span>
                </label>
                {formData.isGift && (
                  <div className="mt-3">
                    <textarea
                      name="giftMessage"
                      value={formData.giftMessage}
                      onChange={handleInputChange}
                      placeholder="Escribe aquí tu mensaje de felicitación o dedicatoria..."
                      rows={2}
                      className="w-full border border-stone-300 rounded-lg p-2.5 text-xs outline-none focus:border-amber-700"
                    />
                  </div>
                )}
              </div>
            </div>

            {/* 3. Payment Method Selection */}
            <div className="bg-white rounded-2xl p-6 border border-stone-200 shadow-2xs space-y-4">
              <h2 className="font-serif text-lg font-bold text-stone-900 flex items-center gap-2">
                <span className="w-6 h-6 rounded-full bg-amber-900 text-white text-xs flex items-center justify-center font-sans">
                  3
                </span>
                <span>Forma de Pago Segura</span>
              </h2>

              <div className="space-y-3">
                {/* Bizum */}
                <label
                  className={`flex items-center justify-between p-4 rounded-xl border-2 cursor-pointer transition ${
                    paymentMethod === "Bizum"
                      ? "border-amber-800 bg-amber-50/50"
                      : "border-stone-200 hover:border-stone-300"
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <input
                      type="radio"
                      name="paymentMethod"
                      value="Bizum"
                      checked={paymentMethod === "Bizum"}
                      onChange={() => setPaymentMethod("Bizum")}
                      className="text-amber-900 focus:ring-amber-700 w-4 h-4"
                    />
                    <div>
                      <span className="font-bold text-xs text-stone-900 block">
                        Bizum (Pago Móvil Instantáneo)
                      </span>
                      <span className="text-[11px] text-stone-500">
                        Pago directo e inmediato mediante tu número de teléfono móvil.
                      </span>
                    </div>
                  </div>
                  <Smartphone className="w-5 h-5 text-teal-600" />
                </label>

                {/* Redsys Credit/Debit Card */}
                <label
                  className={`flex items-center justify-between p-4 rounded-xl border-2 cursor-pointer transition ${
                    paymentMethod === "Redsys (Tarjeta)"
                      ? "border-amber-800 bg-amber-50/50"
                      : "border-stone-200 hover:border-stone-300"
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <input
                      type="radio"
                      name="paymentMethod"
                      value="Redsys (Tarjeta)"
                      checked={paymentMethod === "Redsys (Tarjeta)"}
                      onChange={() => setPaymentMethod("Redsys (Tarjeta)")}
                      className="text-amber-900 focus:ring-amber-700 w-4 h-4"
                    />
                    <div>
                      <span className="font-bold text-xs text-stone-900 block">
                        Tarjeta de Crédito / Débito (Redsys TPV Oficial)
                      </span>
                      <span className="text-[11px] text-stone-500">
                        Visa, MasterCard con autenticación 3D Secure protegida por banco.
                      </span>
                    </div>
                  </div>
                  <CreditCard className="w-5 h-5 text-blue-600" />
                </label>

                {/* PayPal */}
                <label
                  className={`flex items-center justify-between p-4 rounded-xl border-2 cursor-pointer transition ${
                    paymentMethod === "PayPal"
                      ? "border-amber-800 bg-amber-50/50"
                      : "border-stone-200 hover:border-stone-300"
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <input
                      type="radio"
                      name="paymentMethod"
                      value="PayPal"
                      checked={paymentMethod === "PayPal"}
                      onChange={() => setPaymentMethod("PayPal")}
                      className="text-amber-900 focus:ring-amber-700 w-4 h-4"
                    />
                    <div>
                      <span className="font-bold text-xs text-stone-900 block">
                        PayPal
                      </span>
                      <span className="text-[11px] text-stone-500">
                        Paga cómodamente con tu saldo PayPal o tarjeta asociada.
                      </span>
                    </div>
                  </div>
                  <span className="text-xs font-bold text-blue-800 font-sans">
                    PayPal
                  </span>
                </label>
              </div>
            </div>

          </div>

          {/* Right Column: Order Summary & Pay Button */}
          <div className="lg:col-span-5 space-y-6">
            <div className="bg-white rounded-2xl p-6 border border-stone-200 shadow-xl sticky top-24 space-y-5">
              <h2 className="font-serif text-lg font-bold text-stone-900 pb-3 border-b border-stone-100">
                Resumen de tu Pedido ({cart.reduce((acc, i) => acc + i.quantity, 0)} artículos)
              </h2>

              {/* Items List */}
              <div id="ra-checkout-items-list" className="divide-y divide-stone-100 max-h-60 overflow-y-auto pr-1">
                {cart.map((item) => (
                  <div key={item.product.id} className="py-2.5 flex items-center justify-between gap-3">
                    <div className="flex items-center gap-2.5">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={item.product.thumbnail}
                        alt={item.product.name}
                        className="w-11 h-11 object-cover rounded-md border border-stone-200 shrink-0"
                      />
                      <div className="min-w-0">
                        <h4 className="text-xs font-semibold text-stone-900 truncate">
                          {item.product.name}
                        </h4>
                        <span className="text-[11px] text-stone-500">
                          {item.quantity} x {item.product.price.toFixed(2)} €
                        </span>
                      </div>
                    </div>
                    <span className="font-bold text-xs text-stone-900 shrink-0">
                      {(item.product.price * item.quantity).toFixed(2)} €
                    </span>
                  </div>
                ))}
              </div>

              {/* Coupon Box */}
              <div className="pt-2 border-t border-stone-100">
                {appliedCoupon ? (
                  <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-2 flex items-center justify-between text-xs text-emerald-800">
                    <span className="flex items-center gap-1 font-semibold">
                      <Tag className="w-3.5 h-3.5" />
                      Cupón: {appliedCoupon.code}
                    </span>
                    <button
                      type="button"
                      onClick={removeCoupon}
                      className="text-emerald-700 font-bold underline text-[11px]"
                    >
                      Quitar
                    </button>
                  </div>
                ) : (
                  <div className="flex gap-2">
                    <input
                      type="text"
                      placeholder="Cupón dto."
                      value={couponCode}
                      onChange={(e) => setCouponCode(e.target.value)}
                      className="flex-1 border border-stone-300 rounded-lg px-2.5 py-1.5 text-xs uppercase outline-none focus:border-amber-700"
                    />
                    <button
                      type="button"
                      onClick={handleApplyCoupon}
                      className="bg-stone-800 hover:bg-stone-900 text-stone-100 px-3 py-1.5 rounded-lg text-xs font-semibold transition"
                    >
                      Aplicar
                    </button>
                  </div>
                )}
                {couponMsg && (
                  <p className={`text-[11px] mt-1 ${couponMsg.isError ? "text-rose-600" : "text-emerald-700"}`}>
                    {couponMsg.text}
                  </p>
                )}
              </div>

              {/* Cost Calculations */}
              <div className="space-y-2 text-xs text-stone-600 pt-2 border-t border-stone-100">
                <div className="flex justify-between">
                  <span>Subtotal (IVA 10% incluido)</span>
                  <span id="ra-checkout-subtotal-val" className="font-semibold text-stone-900">{subtotal.toFixed(2)} €</span>
                </div>
                {discount > 0 && (
                  <div className="flex justify-between text-emerald-700 font-semibold">
                    <span>Descuento</span>
                    <span id="ra-checkout-discount-val">-{discount.toFixed(2)} €</span>
                  </div>
                )}
                <div className="flex justify-between items-center">
                  <span className="flex items-center gap-1">
                    <Truck className="w-3.5 h-3.5 text-amber-800" />
                    Gastos de Envío (24-48h)
                  </span>
                  <span id="ra-checkout-shipping-val" className={shippingCost === 0 ? "font-bold text-emerald-700 uppercase" : "font-semibold text-stone-900"}>
                    {shippingCost === 0 ? "GRATIS" : `${shippingCost.toFixed(2)} €`}
                  </span>
                </div>
                <div className="flex justify-between items-baseline text-base font-serif font-bold text-stone-900 pt-3 border-t border-stone-200">
                  <span>Total a Pagar</span>
                  <span id="ra-checkout-total-val" className="text-xl font-sans text-amber-950">{total.toFixed(2)} €</span>
                </div>
              </div>

              {/* Pay Button */}
              <button
                id="ra-checkout-submit-btn"
                type="submit"
                disabled={isProcessing}
                className="w-full bg-amber-900 hover:bg-amber-950 text-amber-50 py-3.5 rounded-xl font-bold text-sm tracking-wide shadow-lg hover:shadow-xl transition transform active:scale-98 flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
              >
                {isProcessing ? (
                  <span>Procesando pago seguro...</span>
                ) : (
                  <>
                    <Lock className="w-4 h-4 text-amber-400" />
                    <span id="ra-checkout-btn-text">Confirmar y Pagar · {total.toFixed(2)} €</span>
                  </>
                )}
              </button>

              <div className="text-center text-[11px] text-stone-500 pt-1">
                Al realizar el pedido aceptas los términos y condiciones de compra de Raúl Asencio Pastelerías.
              </div>
            </div>
          </div>

        </form>
        </div>

      </div>
    </div>
  );
}

function ShoppingBagIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
      <path d="M3 6h18" />
      <path d="M16 10a4 4 0 0 1-8 0" />
    </svg>
  );
}