Styled input group

"use client"

import type * as React from "react"
import { AtSign, Copy, Eye, Search } from "lucide-react"

import { cn } from "@/lib/utils"

/* Input group family: a single-framed unit with addons leaning on TEXT, an ICON or a BUTTON. The root wrapper takes a primary border plus ring through focus-within. Colour comes ONLY from tokens. Size = height (aligned with the base scale). Each wraps a real <input> and passes every native prop through; an Omit is required because of the native `size` clash. The transform transitions are guarded with motion-reduce. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "h-8 text-sm",
  md: "h-9 text-sm",
  lg: "h-10 text-base",
  xl: "h-12 text-base",
}

const rootBase =
  "group inline-flex w-64 max-w-full items-center overflow-hidden rounded-lg border border-field-border bg-transparent transition-colors duration-(--motion-base) focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/50"

const fieldBase =
  "h-full w-full min-w-0 bg-transparent px-3 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"

const addonBase =
  "flex h-full shrink-0 select-none items-center gap-1.5 bg-surface-2 px-3 text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

type Props = Omit<React.ComponentProps<"input">, "size"> & { size?: StyledSize }

/* Prefix: a token text chip on the left (for example "https://"). */
export function PrefixGroup({ className, size = "md", ...props }: Props) {
  return (
    <div data-slot="styled-input-group" className={cn(rootBase, height[size], className)}>
      <span className={cn(addonBase, "border-r border-field-border")}>https://</span>
      <input {...props} className={cn(fieldBase, "pl-2")} />
    </div>
  )
}

/* Suffix: a token text chip on the right (for example ".com"). */
export function SuffixGroup({ className, size = "md", ...props }: Props) {
  return (
    <div data-slot="styled-input-group" className={cn(rootBase, height[size], className)}>
      <input {...props} className={cn(fieldBase, "pr-2")} />
      <span className={cn(addonBase, "border-l border-field-border")}>.com</span>
    </div>
  )
}

/* Icon: a token icon leading and trailing inside the field; turns primary on focus. */
export function IconGroup({ className, size = "md", ...props }: Props) {
  return (
    <div data-slot="styled-input-group" className={cn(rootBase, height[size], "px-3", className)}>
      <AtSign className="size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary" />
      <input {...props} className={cn(fieldBase, "px-2")} />
      <Search className="size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary" />
    </div>
  )
}

/* Button: saga yaslanmis token aksiyon butonu (ornek Copy). */
export function ButtonGroup({ className, size = "md", ...props }: Props) {
  return (
    <div data-slot="styled-input-group" className={cn(rootBase, height[size], className)}>
      <input {...props} className={fieldBase} />
      <button
        type="button"
        className="flex h-full shrink-0 select-none items-center gap-1.5 border-l border-field-border bg-secondary px-3 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
      >
        <Copy />
        <span>Copy</span>
      </button>
    </div>
  )
}

/* Segment: solda kucuk token select segmenti + alan. */
export function SegmentGroup({ className, size = "md", ...props }: Props) {
  return (
    <div data-slot="styled-input-group" className={cn(rootBase, height[size], className)}>
      <select
        aria-label="Protocol"
        className="h-full shrink-0 select-none border-r border-field-border bg-surface-2 pl-3 pr-2 text-muted-foreground outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50"
      >
        <option value="https">https://</option>
        <option value="http">http://</option>
      </select>
      <input {...props} className={cn(fieldBase, "pl-2")} />
      <Eye className="mr-3 size-4 shrink-0 text-muted-foreground" />
    </div>
  )
}