Forecast Dashboard

import type { IconSet } from './forecast-icons';
import type {
	ForecastType,
	LocationInput,
	TideUnit,
	WeatherUnit,
	CurrentWeather,
	WeatherBackground,
	WeatherPeriod
} from '@/lib/wxcn/types.js';
import { WeatherForecast } from './weather-forecast';
import { TideForecast } from './tide-forecast';
import { MoonForecast } from './moon-forecast';

export type ForecastDashboardProps = {
	interactive?: boolean;
	iconType?: IconSet;
	timeZone?: string;
	type?: ForecastType;
	size?: 'sm' | 'default' | 'lg';
	density?: 'compact' | 'comfortable';
	weatherUnit?: WeatherUnit;
	windUnit?: 'mph' | 'km/h' | 'm/s' | 'knots';
	tideUnit?: TideUnit;
	background?: WeatherBackground;
	showTemperatureTrend?: boolean;
	showHighLow?: boolean;
	currentWeather?: CurrentWeather | null;
	hourlyForecast?: WeatherPeriod[];
	location?: LocationInput;
	tideLocation?: LocationInput;
};

export function ForecastDashboard({
	interactive = false,
	iconType,
	timeZone,
	type = 'summary',
	size = 'default',
	density = 'comfortable',
	weatherUnit = 'fahrenheit',
	windUnit = 'mph',
	tideUnit = 'ft',
	background = 'none',
	showTemperatureTrend = false,
	showHighLow = false,
	currentWeather,
	hourlyForecast,
	tideLocation,
	location
}: ForecastDashboardProps) {
	return (
		<div className="@container/dashboard w-full">
			<div className="grid items-start gap-4 @min-[38rem]/dashboard:grid-cols-2 @min-[52rem]/dashboard:grid-cols-3">
				<div className="min-w-0 @min-[38rem]/dashboard:col-span-2 @min-[52rem]/dashboard:col-span-1">
					<WeatherForecast
						interactive={interactive}
						iconType={iconType}
						timeZone={timeZone}
						type={type}
						size={size}
						density={density}
						unit={weatherUnit}
						windUnit={windUnit}
						location={location}
						background={background}
						showTemperatureTrend={showTemperatureTrend}
						showHighLow={showHighLow}
						currentWeather={currentWeather}
						hourlyForecast={hourlyForecast}
					/>
				</div>
				<TideForecast
					interactive={interactive}
					iconType={iconType}
					timeZone={timeZone}
					type={type}
					size={size}
					density={density}
					unit={tideUnit}
					location={tideLocation}
				/>
				<MoonForecast
					interactive={interactive}
					iconType={iconType}
					timeZone={timeZone}
					type={type}
					size={size}
					density={density}
					location={location}
				/>
			</div>
		</div>
	);
}

export default ForecastDashboard;