'use client'

import { useEffect, useRef } from 'react'
import JsBarcode from 'jsbarcode'

interface BarcodeLabelProps {
  sku: string
  name: string
  category?: string
  unit?: string
}

export default function BarcodeLabel({ sku, name, category, unit }: BarcodeLabelProps) {
  const barcodeRef = useRef<SVGSVGElement>(null)

  useEffect(() => {
    if (barcodeRef.current) {
      try {
        JsBarcode(barcodeRef.current, sku, {
          format: 'CODE128',
          width: 2,
          height: 60,
          displayValue: true,
          fontSize: 14,
          margin: 10,
        })
      } catch (error) {
        console.error('Error generating barcode:', error)
      }
    }
  }, [sku])

  return (
    <div className="border border-gray-300 p-3 bg-white inline-block" style={{ width: '3.5in', minHeight: '2in' }}>
      <div className="text-center">
        {/* Company/System Name */}
        <div className="text-xs font-bold text-gray-800 mb-1">SISTEMA DE INVENTARIO</div>
        
        {/* Item Name */}
        <div className="text-sm font-semibold text-gray-900 mb-2 leading-tight" style={{ minHeight: '2.5em' }}>
          {name}
        </div>
        
        {/* Category */}
        {category && (
          <div className="text-xs text-gray-600 mb-1">Categoría: {category}</div>
        )}
        
        {/* Barcode */}
        <div className="my-2 flex justify-center">
          <svg ref={barcodeRef} className="max-w-full" />
        </div>
        
        {/* SKU */}
        <div className="text-xs font-mono font-semibold text-gray-800 mt-1">SKU: {sku}</div>
        
        {/* Unit */}
        {unit && (
          <div className="text-xs text-gray-600 mt-1">Unidad: {unit}</div>
        )}
      </div>
    </div>
  )
}