'use client'

import { Plus, Grid3X3 } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch'
import type { DeviceMode } from '../../hooks/useBuilderState.js'

export interface BottomBarProps {
  deviceMode: DeviceMode
  showGridOverlay: boolean
  onAddSection: () => void
  onToggleGrid: (show: boolean) => void
}

const DEVICE_LABELS: Record<DeviceMode, string> = {
  desktop: '100%',
  tablet: '768px',
  mobile: '375px',
}

export function BottomBar({
  deviceMode,
  showGridOverlay,
  onAddSection,
  onToggleGrid,
}: BottomBarProps) {
  return (
    <div
      className="bg-card border-border flex h-10 shrink-0 items-center gap-4 border-t px-4"
      role="toolbar"
      aria-label="Builder actions"
    >
      {/* Add Section */}
      <button
        onClick={onAddSection}
        className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 px-3 py-2 text-sm transition-colors"
        aria-label="Add a new section"
      >
        <Plus size={14} />
        <span>Add Section</span>
      </button>

      {/* Divider */}
      <div className="bg-border h-5 w-px" />

      {/* Grid overlay toggle */}
      <label className="flex cursor-pointer items-center gap-2">
        <Grid3X3 size={14} className="text-muted-foreground" />
        <Switch.Root
          checked={showGridOverlay}
          onCheckedChange={onToggleGrid}
          className="bg-input-background data-[state=checked]:bg-primary relative h-[18px] w-8 rounded-full transition-colors"
          aria-label="Toggle grid overlay"
        >
          <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
        </Switch.Root>
        <span className="text-muted-foreground text-xs">Grid</span>
      </label>

      {/* Spacer */}
      <div className="flex-1" />

      {/* Zoom / device width display */}
      <span className="text-muted-foreground text-xs tabular-nums">
        {DEVICE_LABELS[deviceMode]}
      </span>
    </div>
  )
}
