'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Layers, Network, Cpu, Globe } from 'lucide-react'
import { cn } from '@/lib/utils'

export type LensType = 'PHYSICAL' | 'NETWORK' | 'APPLICATION' | 'GOVERNANCE'

interface LensSwitcherProps {
  currentLens: LensType
  onLensChange: (lens: LensType) => void
}

const lenses: { type: LensType; label: string; icon: typeof Layers; description: string }[] = [
  { type: 'PHYSICAL', label: 'Physical', icon: Layers, description: 'Hardware and datacenters' },
  { type: 'NETWORK', label: 'Network', icon: Network, description: 'Network topology and connectivity' },
  { type: 'APPLICATION', label: 'Application', icon: Cpu, description: 'Services and applications' },
  { type: 'GOVERNANCE', label: 'Governance', icon: Globe, description: 'Policies and compliance' },
]

export function LensSwitcher({ currentLens, onLensChange }: LensSwitcherProps) {
  return (
    <div className="flex gap-2 p-2 rounded-lg border border-studio-medium bg-studio-dark">
      {lenses.map((lens) => {
        const Icon = lens.icon
        const isActive = currentLens === lens.type
        return (
          <Button
            key={lens.type}
            variant={isActive ? 'phoenix' : 'ghost'}
            onClick={() => onLensChange(lens.type)}
            className={cn(
              'flex flex-col items-center gap-1 h-auto py-3 px-4',
              isActive && 'bg-phoenix-fire text-white'
            )}
            title={lens.description}
          >
            <Icon className="h-5 w-5" />
            <span className="text-xs">{lens.label}</span>
          </Button>
        )
      })}
    </div>
  )
}

