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

export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
    onValueChange?: (value: string) => void
}

const Select = ({ children, onValueChange, ...props }: any) => {
    return <div className="relative">{children}</div>
}

const SelectTrigger = ({ className, children, ...props }: any) => (
    <div className={cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}>
        {children}
    </div>
)

const SelectValue = ({ placeholder, ...props }: any) => (
    <span className="block truncate">{placeholder}</span>
)

const SelectContent = ({ className, children, ...props }: any) => (
    <div className={cn("relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80", className)} {...props}>
        <div className="p-1">{children}</div>
    </div>
)

const SelectItem = ({ className, children, ...props }: any) => (
    <div className={cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} {...props}>
        {children}
    </div>
)

// Simplified Mock Implementation for now since we can't install radix primitives
// Replacing the complex composition with a native select for robustness in this restricted environment
export const SimpleSelect = ({ value, onValueChange, children }: { value: string, onValueChange: (v: string) => void, children: React.ReactNode }) => {
    return (
        <select
            value={value}
            onChange={(e) => onValueChange(e.target.value)}
            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
        >
            {children}
        </select>
    )
}

export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue }
