Inset shadow scroll areas

"use client"

import type * as React from "react"

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

/* Scroll-area inset family: 5 decorative scroll areas. They draw gradient layers giving an inner-shadow effect at the top and bottom edges (and on all edges in Frame). The shadow goes from a low-alpha tone of the foreground token via color-mix to transparent; the content slides beneath it and signals the overflow. size -> the viewport height. */

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

const height: Record<StyledSize, string> = {
  sm: "h-40",
  md: "h-56",
  lg: "h-72",
  xl: "h-96",
}

const base = "w-full overflow-y-auto rounded-lg border border-border bg-surface-2 p-3"

const scrollbar =
  "[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border"

/* Varsayilan icerik: kaydirmayi tetikleyecek kadar uzun, token-stilli satirlar. */
function DefaultRows({ count = 16 }: { count?: number }) {
  return (
    <div className="flex flex-col gap-2">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="flex items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
        >
          <span className="font-medium">Satir {i + 1}</span>
          <span className="text-xs text-muted-foreground">token</span>
        </div>
      ))}
    </div>
  )
}

type Props = {
  className?: string
  size?: StyledSize
  children?: React.ReactNode
}

/* Shared shell: a relative wrapper plus the scroll area plus the given edge shadows. */
function InsetShell({
  className,
  size = "md",
  children,
  overlays,
}: Props & { overlays: React.ReactNode }) {
  return (
    <div data-slot="styled-scroll-area" className={cn("relative", className)}>
      <div className={cn(base, height[size], scrollbar)}>{children ?? <DefaultRows />}</div>
      {overlays}
    </div>
  )
}

const topSoft =
  "pointer-events-none absolute inset-x-px top-px h-7 rounded-t-lg bg-gradient-to-b from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent"
const bottomSoft =
  "pointer-events-none absolute inset-x-px bottom-px h-7 rounded-b-lg bg-gradient-to-t from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent"
const topDeep =
  "pointer-events-none absolute inset-x-px top-px h-11 rounded-t-lg bg-gradient-to-b from-[color-mix(in_oklab,var(--color-foreground)_24%,transparent)] to-transparent"
const bottomDeep =
  "pointer-events-none absolute inset-x-px bottom-px h-11 rounded-b-lg bg-gradient-to-t from-[color-mix(in_oklab,var(--color-foreground)_24%,transparent)] to-transparent"

/* Soft: ust ve alt kenarda ince, hafif ic golge. */
export function SoftInsetScrollArea(props: Props) {
  return (
    <InsetShell
      {...props}
      overlays={
        <>
          <div aria-hidden className={topSoft} />
          <div aria-hidden className={bottomSoft} />
        </>
      }
    />
  )
}

/* Deep: ust ve alt kenarda derin, belirgin ic golge. */
export function DeepInsetScrollArea(props: Props) {
  return (
    <InsetShell
      {...props}
      overlays={
        <>
          <div aria-hidden className={topDeep} />
          <div aria-hidden className={bottomDeep} />
        </>
      }
    />
  )
}

/* Top: an inner shadow on the top edge only. */
export function TopInsetScrollArea(props: Props) {
  return <InsetShell {...props} overlays={<div aria-hidden className={topDeep} />} />
}

/* Bottom: an inner shadow on the bottom edge only. */
export function BottomInsetScrollArea(props: Props) {
  return <InsetShell {...props} overlays={<div aria-hidden className={bottomDeep} />} />
}

/* Frame: dort kenarda ic golge; icerigi bir cerceve icine oturtur. */
export function FrameInsetScrollArea(props: Props) {
  return (
    <InsetShell
      {...props}
      overlays={
        <>
          <div aria-hidden className={topSoft} />
          <div aria-hidden className={bottomSoft} />
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-px left-px w-6 rounded-l-lg bg-gradient-to-r from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent"
          />
          <div
            aria-hidden
            className="pointer-events-none absolute inset-y-px right-px w-6 rounded-r-lg bg-gradient-to-l from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent"
          />
        </>
      }
    />
  )
}