import React from 'react';
import LiveStream from '@/app/components/LiveStream';
import DonationPanel from '@/app/components/DonationPanel';
import OwlInfo from '@/app/components/OwlInfo';

export default function LivestreamPage({ params }: { params: { id: string } }) {
  // In a real app, you'd fetch the livestream data based on the ID
  const streamData = {
    id: params.id,
    name: `Livestream ${params.id}`,
    location: "Florida",
  };

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="bg-black/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl font-bold neon-glow text-accent">{streamData.name}</h1>
        </div>
      </header>
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <LiveStream id={streamData.id} />
            </div>
            <div className="space-y-6">
              <DonationPanel id={streamData.id} />
              <OwlInfo id={streamData.id} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}