'use client';

import { Play } from 'lucide-react';
import { DemoSectionProps } from '@/lib/page-builder/types';

export default function DemoSection({
  title = "See It in Action",
  description = "Powerful admin dashboard with everything you need to manage your content",
  demoUrl = "https://www.youtube.com/watch?v=demo",
  previewImage,
  browserUrl = "admin.nextdash.com/dashboard",
  className = "",
  id
}: DemoSectionProps) {
  return (
    <section id={id || "demo"} className={`py-20 px-4 bg-linear-to-b from-white to-gray-50 ${className}`}>
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">{title}</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">{description}</p>
        </div>

        <div className="relative">
          <div className="absolute inset-0 bg-linear-to-r from-blue-600/10 to-purple-600/10 rounded-3xl blur-3xl" />
          <div className="relative bg-white border border-gray-200 rounded-3xl shadow-2xl overflow-hidden">
            <div className="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-200">
              <div className="flex gap-2">
                <div className="w-3 h-3 bg-red-500 rounded-full" />
                <div className="w-3 h-3 bg-yellow-500 rounded-full" />
                <div className="w-3 h-3 bg-green-500 rounded-full" />
              </div>
              <div className="flex-1 text-center text-sm text-gray-600">
                {browserUrl}
              </div>
            </div>
            <a 
              href={demoUrl} 
              target="_blank" 
              rel="noopener noreferrer"
              className="aspect-video bg-linear-to-br from-gray-900 to-gray-800 flex items-center justify-center hover:opacity-90 transition-opacity"
            >
              {previewImage ? (
                <img src={previewImage} alt={title} className="w-full h-full object-cover" />
              ) : (
                <div className="text-white text-center">
                  <Play className="w-16 h-16 mx-auto mb-4 text-white/50" />
                  <p className="text-xl">Interactive Demo Video</p>
                  <p className="text-sm text-white/50">Click to watch</p>
                </div>
              )}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}