import React from 'react';
import { Link } from 'react-router-dom';
import { getFileUrl } from '../../services/pocketbaseService';
import { FaStar } from 'react-icons/fa';
import { motion } from 'framer-motion';

const MobileMediaCard = ({ media }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -5 }}
      className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg overflow-hidden"
    >
      <Link to={`/media/${media.path}`}>
        <div className="relative aspect-[2/3]">
          <img
            src={getFileUrl(media, 'poster')}
            alt={media.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-transparent to-transparent"></div>
          <div className="absolute bottom-0 left-0 right-0 p-3">
            <h3 className="text-campfire-light font-semibold line-clamp-1">
              {media.title}
            </h3>
            <div className="flex items-center text-campfire-amber mt-1">
              <FaStar className="mr-1" />
              <span>{media.average_rating?.toFixed(1) || '0.0'}</span>
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
};

export default MobileMediaCard;