'use client'

import { ShoppingCart, Heart, Share2, CreditCard, Truck, ShieldCheck } from 'lucide-react'
import { useTranslations } from 'next-intl'
import { useCurrencyStore } from '@/store/currencyStore'

interface ProductActionsProps {
  onAddToCart: () => void
  onBuyNow: () => void
  onAddToWishlist: () => void
  onShare: () => void
  isInWishlist?: boolean
  disabled?: boolean
}

export default function ProductActions({
  onAddToCart,
  onBuyNow,
  onAddToWishlist,
  onShare,
  isInWishlist = false,
  disabled = false,
}: ProductActionsProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('ProductDetail')
  return (
    <div className="space-y-4">
      <div className="flex gap-3">
        <button
          onClick={onAddToCart}
          disabled={disabled}
          className="flex-1 flex items-center justify-center gap-2 bg-gradient-primary text-white py-3 rounded-xl font-semibold hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <ShoppingCart size={18} />
          {t('addToCart')}
        </button>
        <button
          onClick={onBuyNow}
          disabled={disabled}
          className="flex-1 flex items-center justify-center gap-2 border-2 border-primary text-primary py-3 rounded-xl font-semibold hover:bg-primary hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <CreditCard size={18} />
          {t('buyNow')}
        </button>
      </div>

      <div className="flex gap-3">
        <button
          onClick={onAddToWishlist}
          className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg border transition-all ${
            isInWishlist
              ? 'bg-primary/10 border-primary text-primary'
              : 'border-gray-200 text-dark hover:border-primary hover:text-primary'
          }`}
        >
          <Heart size={16} fill={isInWishlist ? 'currentColor' : 'none'} />
          {t('wishlist')}
        </button>
        <button
          onClick={onShare}
          className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg border border-gray-200 text-dark hover:border-primary hover:text-primary transition-all"
        >
          <Share2 size={16} />
          {t('share')}
        </button>
      </div>

      {/* Delivery Info */}
      <div className="bg-gray-50 rounded-xl p-4 space-y-3 mt-4">
        <div className="flex items-center gap-3">
          <Truck size={18} className="text-primary" />
          <div>
            <p className="text-sm font-medium text-dark">{t('freeDelivery')}</p>
            <p className="text-xs text-gray-custom">{t('freeDeliveryDesc', { amount: formatAmount(1000) })}</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <ShieldCheck size={18} className="text-primary" />
          <div>
            <p className="text-sm font-medium text-dark">{t('qualityGuarantee')}</p>
            <p className="text-xs text-gray-custom">{t('qualityGuaranteeDesc')}</p>
          </div>
        </div>
      </div>
    </div>
  )
}