"use client";

import { useTheme } from "@/context/ThemeContext";
import Image from "next/image";

export default function StationImage({ imageUrl, name, className, small = false }: { imageUrl: string | undefined, name: string, className?: string, small?: boolean }) {
  const { theme } = useTheme();
  const defaultImageUrl = theme === 'dark' ? "/images/station/default_station_landscape_dark.png" : "/images/station/default_station_landscape.png";

  if (small) {
    const smallImageUrl = "/images/station/default_station.png";
    return (
      <Image
        src={imageUrl? imageUrl  : smallImageUrl}
        alt={name}
        width={80}
        height={80}
        unoptimized
        className={`rounded-t-lg object-cover ${className}`}
      />
    )
  }
  return (
    <Image
      src={imageUrl? imageUrl  : defaultImageUrl}
      alt={name}
      fill
      unoptimized
      className={`rounded-t-lg object-cover ${className}`}
    />
  )
}