'use client'

import { Button } from '@/components/ui/button'
import { pillars, getPillarColor } from '@/lib/design-system'

type PillarCode = keyof typeof pillars

interface LensSelectorProps {
  selectedLens: PillarCode | null
  onLensChange: (lens: PillarCode | null) => void
}

export default function LensSelector({ selectedLens, onLensChange }: LensSelectorProps) {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant={selectedLens === null ? 'phoenix' : 'outline'}
        size="sm"
        onClick={() => onLensChange(null)}
      >
        All Pillars
      </Button>
      {Object.entries(pillars).map(([code, pillar]) => (
        <Button
          key={code}
          variant={selectedLens === code ? 'phoenix' : 'outline'}
          size="sm"
          onClick={() => onLensChange(code as PillarCode)}
          data-pillar-bg={selectedLens === code ? '' : undefined}
          style={
            selectedLens === code
              ? { '--pillar-bg': getPillarColor(code as PillarCode) } as React.CSSProperties
              : undefined
          }
        >
          {pillar.name}
        </Button>
      ))}
    </div>
  )
}

