// /components/common/Card.tsx

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';

// Importar estilos de Swiper
import 'swiper/css';
import 'swiper/css/navigation';

interface CardProps {
  item: CardItem;
  onAddToCart: (item: CardItem) => void;
}

const Card: React.FC<CardProps> = ({ item, onAddToCart }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="card"
      style={cardStyle}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="image-container" style={{ position: 'relative' }}>
        <Swiper
          modules={[Navigation]}
          spaceBetween={0}
          slidesPerView={1}
          navigation={isHovered}
          style={{ width: '100%', height: '200px' }}
        >
          {item.images.map((imgSrc, index) => (
            <SwiperSlide key={index}>
              <img src={imgSrc} alt={item.name} style={imageStyle} />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className="card-info" style={infoStyle}>
        <h3 style={titleStyle}>{item.name}</h3>
        <p style={descriptionStyle}>{item.description}</p>
        {item.duration && <p style={durationStyle}>Duración: {formatDuration(item.duration)}</p>}
        <p style={priceStyle}>Precio: €{item.price.toFixed(2)}</p>
        {item.discount && item.discount > 0 && (
          <p style={discountStyle}>Descuento: {item.discount}%</p>
        )}
        <button onClick={() => onAddToCart(item)} style={buttonStyle}>
          +
        </button>
      </div>
    </div>
  );
};

// Función para formatear la duración
const formatDuration = (duration: string): string => {
  const [hours, minutes] = duration.split(':').map(Number);
  return `${hours}h ${minutes}m`;
};

// Estilos en línea
const cardStyle: React.CSSProperties = {
  border: '1px solid #d3d3d3',
  borderRadius: '8px',
  padding: '16px',
  margin: '8px',
  width: '250px',
  boxShadow: '2px 2px 12px rgba(0,0,0,0.1)',
  display: 'flex',
  flexDirection: 'column',
};

const imageStyle: React.CSSProperties = {
  width: '100%',
  height: '150px',
  objectFit: 'cover',
};

const infoStyle: React.CSSProperties = {
  marginTop: '16px',
};

const titleStyle: React.CSSProperties = {
  fontSize: '18px',
  marginBottom: '8px',
};

const descriptionStyle: React.CSSProperties = {
  fontSize: '14px',
  marginBottom: '8px',
};

const durationStyle: React.CSSProperties = {
  fontSize: '14px',
  marginBottom: '8px',
};

const priceStyle: React.CSSProperties = {
  fontSize: '16px',
  fontWeight: 'bold',
  marginBottom: '8px',
};

const discountStyle: React.CSSProperties = {
  fontSize: '14px',
  color: 'red',
  marginBottom: '8px',
};

const buttonStyle: React.CSSProperties = {
  backgroundColor: '#6950f3',
  color: '#fff',
  border: 'none',
  borderRadius: '4px',
  padding: '8px',
  cursor: 'pointer',
  fontSize: '16px',
  alignSelf: 'flex-end',
};

export default Card;
