import React from 'react';

export const TemplatePreview = ({ templateType }) => {
  // Template information for different types
  const templateInfo = {
    developer: {
      name: "Developer Portfolio",
      description: "A modern, responsive portfolio site with sections for projects, skills, and contact information. Perfect for developers to showcase their work.",
      features: ["Project showcase", "Skills section", "GitHub integration", "Contact form", "Blog ready"],
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80"
    },
    designer: {
      name: "Designer Portfolio",
      description: "A visually stunning portfolio for designers with image galleries, case studies, and animations to showcase creative work.",
      features: ["Visual gallery", "Case studies", "Color scheme customization", "Smooth animations", "Design process showcase"],
      image: "https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
    },
    photographer: {
      name: "Photographer Portfolio",
      description: "An elegant portfolio with fullscreen galleries, image zooming, and lightbox features designed for photographers to display their work.",
      features: ["Fullscreen galleries", "Image zoom", "Lightbox", "Category filtering", "Client proofing"],
      image: "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
    },
    documentation: {
      name: "Documentation Site",
      description: "A comprehensive documentation site with search, code snippets, and versioning support for technical documentation.",
      features: ["Search functionality", "Code snippets with syntax highlighting", "Versioning", "Sidebar navigation", "Mobile-friendly"],
      image: "https://images.unsplash.com/photo-1456406644174-8ddd4cd52a06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80"
    },
    business: {
      name: "Single Page Business Site",
      description: "A professional one-page website for businesses with sections for services, testimonials, team members, and contact information.",
      features: ["Single page layout", "Services section", "Testimonials", "Team profiles", "Contact form with map"],
      image: "https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80"
    }
  };

  const template = templateInfo[templateType] || templateInfo.developer;

  return (
    <div className="mt-6 bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
      {/* Template preview image */}
      <div className="relative h-48 overflow-hidden">
        <img
          src={template.image}
          alt={`${template.name} Preview`}
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
          <div className="p-4">
            <h3 className="text-xl font-semibold text-white">{template.name}</h3>
          </div>
        </div>
      </div>

      {/* Template details */}
      <div className="p-5 space-y-4">
        <p className="text-neutral-300">{template.description}</p>

        <div>
          <h4 className="text-white font-medium mb-2">Features:</h4>
          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {template.features.map((feature, index) => (
              <li key={index} className="text-neutral-400 flex items-center">
                <span className="mr-2 text-[#6d9e37]">✓</span>
                {feature}
              </li>
            ))}
          </ul>
        </div>

        <div className="pt-2">
          <button className="px-4 py-2 bg-[#6d9e37] text-white rounded-md hover:bg-[#598035] transition-colors w-full">
            Select This Template
          </button>
        </div>
      </div>
    </div>
  );
};