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

const SearchResults = ({ results, onResultClick }) => {
  if (!results || results.length === 0) {
    return (
      <div className="text-campfire-light text-center py-4">
        Ничего не найдено
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {results.map((item) => (
        <motion.div
          key={item.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          className="bg-campfire-charcoal/50 backdrop-blur-sm rounded-md overflow-hidden border border-campfire-ash/30"
        >
          <Link 
            to={`/media/${item.path}`} 
            className="block p-4 hover:bg-campfire-ash/20 transition-colors"
            onClick={onResultClick}
          >
            <div className="flex items-start gap-4">
              <img
                src={item.poster ? getFileUrl(item, 'poster', { thumb: '100x150' }) : 'https://via.placeholder.com/100x150'}
                alt={item.title}
                className="w-24 h-36 object-cover rounded-md"
              />
              <div className="flex-1">
                <h3 className="text-campfire-light font-medium">{item.title}</h3>
                <p className="text-campfire-ash text-sm mt-1">{item.type}</p>
                {item.rating && (
                  <div className="mt-2 flex items-center gap-2">
                    <span className="text-campfire-amber">{item.rating}</span>
                    <span className="text-campfire-ash text-sm">/ 10</span>
                  </div>
                )}
              </div>
            </div>
          </Link>
        </motion.div>
      ))}
    </div>
  );
};

export default SearchResults; 