/** Preview viewport presets for the page editor canvas. */
export type ViewportId = '4k' | '1080p' | 'laptop' | 'tablet' | 'mobile'

export interface Viewport {
  id: ViewportId
  label: string
  /** lucide-react icon name */
  icon: string
  /** logical CSS width of the preview surface, in px */
  width: number
}

export const VIEWPORTS: Viewport[] = [
  { id: '4k', label: '4K', icon: 'monitor', width: 1920 },
  { id: '1080p', label: '1080p', icon: 'monitor', width: 1440 },
  { id: 'laptop', label: 'Laptop', icon: 'laptop', width: 1280 },
  { id: 'tablet', label: 'Tablet', icon: 'tablet', width: 768 },
  { id: 'mobile', label: 'Mobile', icon: 'smartphone', width: 390 },
]

export const DEFAULT_VIEWPORT: ViewportId = '1080p'

export function getViewport(id: ViewportId): Viewport {
  return VIEWPORTS.find((v) => v.id === id) ?? VIEWPORTS[1]!
}
