"use client";
import * as React from "react";
import * as S from "@radix-ui/react-select";
import { motion } from "motion/react";
import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

export const Select = S.Root;
export const SelectGroup = S.Group;
export const SelectValue = S.Value;

/** Looks like Input: a sunken pill with a caret. */
export function SelectTrigger({ className, children, ...p }: React.ComponentProps<typeof S.Trigger>) {
  return (
    <S.Trigger
      className={cn(
        "group flex h-11 w-full cursor-pointer items-center justify-between gap-2 rounded-full bg-surface-sunken px-5 text-left font-medium text-on-surface shadow-well outline-none transition-shadow duration-200 focus-visible:ring-4 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-4 aria-invalid:ring-danger/40 data-[placeholder]:text-on-surface-muted [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",
        className
      )}
      {...p}
    >
      {children}
      <S.Icon asChild>
        <CaretDownIcon weight="bold" className="size-4 shrink-0 text-on-surface-muted transition-transform duration-200 group-data-[state=open]:rotate-180" />
      </S.Icon>
    </S.Trigger>
  );
}

/**
 * Raised clay popover that pops in with springs.bouncy.
 * Radix Select cannot forceMount its content, so it closes instantly (no exit animation).
 */
export function SelectContent({ className, children, position = "popper", ...p }: React.ComponentProps<typeof S.Content>) {
  return (
    <S.Portal>
      <S.Content position={position} sideOffset={8} className="z-50 outline-none" {...p}>
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: -6 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          transition={springs.bouncy}
          style={{ transformOrigin: "var(--radix-select-content-transform-origin)" }}
          className={cn(
            "relative max-h-[min(var(--radix-select-content-available-height),22rem)] min-w-[max(var(--radix-select-trigger-width),10rem)] overflow-hidden rounded-[1.4rem] bg-surface p-1.5 text-on-surface shadow-clay",
            className
          )}
        >
          <S.ScrollUpButton className="grid h-6 cursor-default place-items-center text-on-surface-muted">
            <CaretUpIcon weight="bold" className="size-4" />
          </S.ScrollUpButton>
          <S.Viewport>{children}</S.Viewport>
          <S.ScrollDownButton className="grid h-6 cursor-default place-items-center text-on-surface-muted">
            <CaretDownIcon weight="bold" className="size-4" />
          </S.ScrollDownButton>
        </motion.div>
      </S.Content>
    </S.Portal>
  );
}

export function SelectLabel({ className, ...p }: React.ComponentProps<typeof S.Label>) {
  return <S.Label className={cn("px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide text-on-surface-muted", className)} {...p} />;
}

/** Highlighted item gets a soft primary pill. */
export function SelectItem({ className, children, ...p }: React.ComponentProps<typeof S.Item>) {
  return (
    <S.Item
      className={cn(
        "relative flex cursor-pointer select-none items-center gap-2 rounded-full py-2 pl-4 pr-9 text-sm font-semibold outline-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[highlighted]:bg-primary-container data-[highlighted]:text-on-primary-container data-[disabled]:opacity-50",
        className
      )}
      {...p}
    >
      <S.ItemText asChild><span className="flex items-center gap-2 [&_svg]:size-[1.15em] [&_svg]:shrink-0">{children}</span></S.ItemText>
      <S.ItemIndicator asChild>
        <motion.span
          className="absolute right-3 grid place-items-center"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={springs.bouncy}
        >
          <CheckIcon weight="bold" className="size-4" />
        </motion.span>
      </S.ItemIndicator>
    </S.Item>
  );
}

export function SelectSeparator({ className, ...p }: React.ComponentProps<typeof S.Separator>) {
  return <S.Separator className={cn("mx-3 my-1.5 h-px bg-outline/60", className)} {...p} />;
}
export const SelectScrollUpButton = S.ScrollUpButton;
export const SelectScrollDownButton = S.ScrollDownButton;
Installation
