'use client'

import { Star } from 'lucide-react'
import { useTranslations } from 'next-intl'
import { useCurrencyStore } from '@/store/currencyStore'

interface ProductInfoProps {
  name: string
  price: number
  oldPrice?: number | null
  rating: number
  reviews: number
  description?: string | null
  sku: string
  category?: string | null
  inStock: boolean
}

export default function ProductInfo({
  name,
  price,
  oldPrice,
  rating,
  reviews,
  description,
  sku,
  category,
  inStock,
}: ProductInfoProps) {
  const discount = oldPrice ? Math.round(((oldPrice - price) / oldPrice) * 100) : 0
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('ProductDetail')

  return (
    <div className="space-y-4">
      {/* Title */}
      <div>
        <h1 className="text-2xl md:text-3xl font-bold text-dark">{name}</h1>
      </div>

      {/* Rating */}
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-1">
          {[...Array(5)].map((_, i) => (
            <Star
              key={i}
              size={16}
              className={`${
                i < Math.floor(rating)
                  ? 'text-yellow-400 fill-yellow-400'
                  : i < rating
                  ? 'text-yellow-400 fill-yellow-400 half'
                  : 'text-gray-300'
              }`}
            />
          ))}
        </div>
        <span className="text-sm text-dark font-medium">{rating}</span>
        <span className="text-sm text-gray-custom">({t('reviewsCount', { count: reviews })})</span>
        {inStock ? (
          <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">{t('inStock')}</span>
        ) : (
          <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">{t('outOfStock')}</span>
        )}
      </div>

      {/* Price */}
      <div className="flex items-center gap-3">
        <span className="text-3xl font-bold text-primary">{formatAmount(price)}</span>
        {oldPrice && (
          <>
            <span className="text-lg text-gray-custom line-through">{formatAmount(oldPrice)}</span>
            <span className="text-sm bg-red-100 text-red-600 px-2 py-0.5 rounded-full">-{discount}%</span>
          </>
        )}
      </div>

      {/* Description */}
      {description && (
        <div className="pt-2">
          <h3 className="font-semibold text-dark mb-2">{t('description')}</h3>
          <p className="text-gray-custom leading-relaxed">{description}</p>
        </div>
      )}

      {/* Product Details */}
      <div className="pt-2 space-y-2 text-sm">
        <div className="flex gap-4">
          <span className="text-gray-custom w-24">{t('sku')}</span>
          <span className="text-dark">{sku}</span>
        </div>
        {category && (
          <div className="flex gap-4">
            <span className="text-gray-custom w-24">{t('category')}</span>
            <span className="text-dark">{category}</span>
          </div>
        )}
      </div>
    </div>
  )
}