import React from 'react';
import { Link } from 'react-router-dom';
import TiltedCard from '../reactbits/Components/TiltedCard/TiltedCard';
import { getFileUrl } from '../../services/pocketbaseService';

const FeaturedMedia = ({ media }) => {
  if (!media || media.length === 0) {
    return null;
  }

  return (
    <section className="py-16">
      <div className="container-custom">
        <h2 className="text-3xl font-bold text-campfire-light mb-8">Популярное</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {media.map((item) => (
            <Link 
              key={item.id} 
              to={`/media/${item.path}`}
              className="block group"
            >
              <TiltedCard
                imageSrc={item.poster ? getFileUrl(item, 'poster', { thumb: '300x450' }) : 'https://via.placeholder.com/300x450'}
                altText={item.title}
                captionText={item.title}
                containerHeight="450px"
                containerWidth="100%"
                imageHeight="450px"
                imageWidth="300px"
                scaleOnHover={1.05}
                rotateAmplitude={10}
                showMobileWarning={false}
                showTooltip={true}
                displayOverlayContent={true}
                overlayContent={
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-4 flex flex-col justify-end">
                    <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
                    <div className="flex items-center gap-2 text-campfire-amber">
                      <span className="text-lg font-medium">{item.rating}</span>
                      <span className="text-sm">/ 10</span>
                    </div>
                  </div>
                }
              />
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FeaturedMedia; 