"use client";

import type { Dispatch, SetStateAction } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { Stream } from "@/types"; // Updated import from "@/app/page" to "@/types"
import { Label } from "@/components/ui/label";

type StreamSelectorProps = {
  streams: Stream[];
  selectedStream: Stream | null;
  setSelectedStream: Dispatch<SetStateAction<Stream | null>>;
};

export function StreamSelector({
  streams,
  selectedStream,
  setSelectedStream,
}: StreamSelectorProps) {
  const handleStreamChange = (value: string) => {
    const stream = streams.find((s) => s.id === value);
    if (stream) {
      setSelectedStream(stream);
    }
  };

  return (
    <div className="flex flex-col gap-2 w-full">
      <Label htmlFor="stream-select" className="text-sm font-medium text-foreground">
        Choose a Stream:
      </Label>
      <Select
        value={selectedStream?.id || ""}
        onValueChange={handleStreamChange}
      >
        <SelectTrigger id="stream-select" className="w-full bg-card border-border shadow-sm rounded-md">
          <SelectValue placeholder="Select a stream..." />
        </SelectTrigger>
        <SelectContent className="bg-popover border-border shadow-lg rounded-md">
          {streams.map((stream) => (
            <SelectItem
              key={stream.id}
              value={stream.id}
              className="cursor-pointer hover:bg-accent focus:bg-accent rounded-sm"
            >
              {stream.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}