"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

type Device = "desktop" | "tablet" | "mobile"

export interface SelectDeviceProps extends React.HTMLAttributes<HTMLDivElement> {
  value: Device
  onValueChange: (value: Device) => void
  disabled?: boolean
}

export function SelectDevice({
  value,
  onValueChange,
  disabled,
  className,
  ...props
}: SelectDeviceProps) {
  return (
    <div 
      className={cn(
        "flex items-center gap-1 p-1 bg-neutral-100 rounded-lg", 
        disabled && "opacity-50 cursor-not-allowed",
        className
      )} 
      {...props}
    >
      <button
        type="button"
        onClick={() => onValueChange("desktop")}
        disabled={disabled}
        className={cn(
          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
          value === "desktop" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
        )}
      >
        Desktop
      </button>
      <button
        type="button"
        onClick={() => onValueChange("tablet")}
        disabled={disabled}
        className={cn(
          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
          value === "tablet" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
        )}
      >
        Tablet
      </button>
      <button
        type="button"
        onClick={() => onValueChange("mobile")}
        disabled={disabled}
        className={cn(
          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
          value === "mobile" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
        )}
      >
        Mobile
      </button>
    </div>
  )
}
