import React from 'react';
import { Link } from 'react-router-dom';
import { FaArrowLeft, FaFire } from 'react-icons/fa';

const MediaHeader = ({ media }) => {
  const backdropUrl = media.backdrop ? `url(${media.backdrop})` : 'none';
  const posterUrl = media.poster ? `url(${media.poster})` : 'none';

  return (
    <div className="relative">
      {/* Backdrop */}
      <div 
        className="relative h-[500px] w-full"
        style={{
          backgroundImage: `url(${getFileUrl(media, 'backdrop')})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }}
      >
        {/* Gradient Overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-campfire-dark/80 to-transparent"></div>
        
        {/* Content */}
        <div className="container-custom relative z-10 h-full flex items-end pb-12">
          <div className="flex items-center">
            {/* Poster */}
            <img
              src={getFileUrl(media, 'poster')}
              alt={media.title}
              className="w-32 md:w-48 rounded-lg shadow-xl mr-8 object-cover"
            />
            <div>
              <h1 className="text-4xl md:text-5xl font-bold text-campfire-light mb-4">
                {media.title}
              </h1>
              <div className="flex items-center text-campfire-ash text-lg mb-4">
                <span className="text-campfire-amber mr-4 text-2xl font-bold">
                  {media.average_rating ? parseFloat(media.average_rating).toFixed(1) : 'N/A'} / 10
                </span>
                <FaFire className="text-campfire-amber mr-4 text-xl" />
                <span className="text-campfire-ash text-lg mr-4">
                  {media.review_count || 0} рецензий
                </span>
                {media.release_date && (
                  <span className="text-campfire-ash text-lg">
                    Дата выхода: {new Date(media.release_date).toLocaleDateString()}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MediaHeader; 