"use client"; import React from 'react'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; interface LiveStreamProps { id: string; } // Define burrowing owl info based on stream ID const getStreamInfo = (id: string) => { switch (id) { case "1": return { title: "Cape Coral Burrowing Owl", location: "Cape Coral, FL", fact: "The burrowing owl is the official city bird of Cape Coral. These unique owls nest underground and are active during the day." }; case "2": return { title: "Burrowing Owl Habitat", location: "Cape Coral, FL", fact: "Burrowing owls prefer open areas with low vegetation and create underground burrows that provide shelter for many wildlife species." }; case "3": return { title: "Owl Burrow Monitoring", location: "Cape Coral, FL", fact: "CCFW volunteers maintain over 2,500 burrows throughout Cape Coral to protect these threatened ground-dwelling owls." }; default: return { title: `Burrowing Owl Cam ${id}`, location: "Cape Coral, FL", fact: "Burrowing owls are Florida's smallest owl species and are known for their distinctive long legs and daytime activity." }; } }; // Client-side component for dynamic time to avoid hydration errors const ClientTimeDisplay: React.FC = () => { const [currentTime, setCurrentTime] = React.useState(''); React.useEffect(() => { setCurrentTime(new Date().toLocaleDateString() + ' • ' + new Date().toLocaleTimeString()); }, []); return {currentTime}; }; const LiveStream: React.FC = ({ id }) => { // This would be determined by your backend in a real app const isLive = id !== "3"; // Let's assume stream #3 is offline for testing const streamInfo = getStreamInfo(id); // Use a fixed viewer count to avoid hydration errors const viewerCount = isLive ? (id === "1" ? 128 : id === "2" ? 86 : 75) : 0; return (
{streamInfo.title}
{isLive ? 'LIVE' : 'OFFLINE'}
{isLive ? ( <>
{/* Overlay for wildlife stream info */}
CCFW Wildlife Stream
HD

{streamInfo.location} • Cape Coral Friends of Wildlife

HD Video • Live from Florida

{viewerCount}
{/* Stream controls overlay */}
Powered by CCFW
) : (

Stream currently offline

Will return soon. Check back later.

)}
{/* Wildlife fact */}

Wildlife Fact: {streamInfo.fact}

); }; export default LiveStream;