'use client'

import { X } from 'lucide-react'
import Image from 'next/image'

interface Props {
  type: 'samarreta' | 'mitjons'
  onClose: () => void
}

export default function SizeGuideModal({ type, onClose }: Props) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      style={{ backgroundColor: 'rgba(0,0,0,0.85)' }}
      onClick={onClose}
    >
      <div
        className="relative bg-dark-card border border-dark-border rounded-2xl max-w-2xl w-full overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between p-5 border-b border-dark-border">
          <h3 className="text-white font-bold text-lg">
            Guia de talles – {type === 'samarreta' ? 'Samarreta' : 'Mitjons'}
          </h3>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-white transition-colors rounded-lg p-1 hover:bg-dark-muted"
          >
            <X size={20} />
          </button>
        </div>
        <div className="p-5">
          <Image
            src={type === 'samarreta' ? '/assets/Talles Samarreta.jpeg' : '/assets/Talles Mitjons.jpeg'}
            alt={`Guia de talles ${type}`}
            width={640}
            height={400}
            className="w-full rounded-xl object-contain"
          />
          {type === 'samarreta' && (
            <div className="mt-4 grid grid-cols-3 sm:grid-cols-6 gap-2 text-center text-xs">
              {[
                { size: 'S', h: 67, w: 50 },
                { size: 'M', h: 70, w: 52 },
                { size: 'L', h: 73, w: 55 },
                { size: 'XL', h: 76, w: 58 },
                { size: 'XXL', h: 79, w: 61 },
                { size: '3XL', h: 82, w: 64 },
              ].map(({ size, h, w }) => (
                <div key={size} className="bg-dark border border-dark-border rounded-lg p-2">
                  <div className="text-teal font-black mb-1">{size}</div>
                  <div className="text-slate-500">{h}cm alt</div>
                  <div className="text-slate-500">{w}cm ample</div>
                </div>
              ))}
            </div>
          )}
          {type === 'mitjons' && (
            <div className="mt-4 grid grid-cols-3 sm:grid-cols-6 gap-2 text-center text-xs">
              {[
                { size: 'XXS', range: '32-34' },
                { size: 'XS', range: '35-37' },
                { size: 'S', range: '38-39' },
                { size: 'M', range: '40-42' },
                { size: 'L', range: '43-44' },
                { size: 'XL', range: '45-47' },
              ].map(({ size, range }) => (
                <div key={size} className="bg-dark border border-dark-border rounded-lg p-2">
                  <div className="text-teal font-black mb-1">{size}</div>
                  <div className="text-slate-500">{range}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
