import { Calendar, Clock, Eye, Film, Gamepad2, Plus, Star, Tv, X } from 'lucide-solid' import { Dialog as ArkDialog } from '@ark-ui/solid/dialog' import { Portal } from 'solid-js/web' import { Show, splitProps, type ParentComponent } from 'solid-js' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Progress } from '@/components/ui/progress' import type { MediaItem } from '@/types/domain' import { cn } from '@/utils/cn' import { formatRating, formatRuntime } from '@/utils/format' import { mediaBadgeVariant, mediaMeta, mediaMonogram, mediaTypeLabel, mediaYear } from '@/utils/media' export interface MediaDetailDialogProps { item: MediaItem progressPercent?: number open?: boolean onOpenChange?: (open: boolean) => void onAddToWatchlist?: () => void onMarkWatched?: () => void onContinueWatching?: () => void } const MediaTypeIcon = (props: { type: MediaItem['type']; class?: string }) => { const icons = { movie: Film, show: Tv, game: Gamepad2, } const Icon = icons[props.type] return } export const MediaDetailDialog: ParentComponent = (props) => { const [local] = splitProps(props, [ 'item', 'progressPercent', 'open', 'onOpenChange', 'onAddToWatchlist', 'onMarkWatched', 'onContinueWatching', 'children', ]) const tone = () => mediaBadgeVariant(local.item.type) return ( local.onOpenChange?.(details.open)}> }> {local.children} {/* Hero Section */}
{/* Monogram */}

{mediaMonogram(local.item.title)}

{/* Close button */} {/* Type badge */}
{mediaTypeLabel(local.item.type)} {mediaYear(local.item.releaseDate)}
{/* Header */}
{local.item.title}
{formatRuntime(local.item.runtimeMinutes, local.item.type)} {new Date(local.item.releaseDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', })} {formatRating(local.item.rating)}
{/* Body */}
{/* Progress */}
Your progress {local.progressPercent}%
{/* Genres */} 0}>
{local.item.genres.map((genre) => ( {genre} ))}
{/* Overview */}

Overview

{local.item.overview}

{/* Platforms (for games) */} 0}>

Platforms

{local.item.platforms.map((platform) => ( {platform} ))}
{/* Meta info */}
Provider: {local.item.provider.toUpperCase()} ID: {local.item.providerId}
{/* Footer */}
{(onAdd) => ( )} {(onMark) => ( )} {(onContinue) => ( )}
) } const MediaDetailTrigger = (props: { item: MediaItem; progressPercent?: number }) => { return (

{mediaMonogram(props.item.title)}

{mediaTypeLabel(props.item.type)} {mediaYear(props.item.releaseDate)}

{props.item.title}

{props.item.overview}

{mediaMeta(props.item) || formatRuntime(props.item.runtimeMinutes, props.item.type)} {formatRating(props.item.rating)} ★
) }