"use client"

import { Button, Progress, SvgUse } from "@ivtui/base"
import clsx from "clsx"
import prettyBytes from "pretty-bytes"
import type { ComponentProps } from "react"

export const FileList = ({ className, ...props }: ComponentProps<"div">) => (
  <div className={clsx("grid gap-4", className)} {...props} />
)
FileList.displayName = "FileList"

export const FileListItem = ({ className, ...props }: ComponentProps<"div">) => (
  <div
    className={clsx(
      "grid gap-4 rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
      className,
    )}
    {...props}
  />
)
FileListItem.displayName = "FileListItem"

export const FileListHeader = ({ className, ...props }: ComponentProps<"div">) => (
  <div className={clsx("flex items-center gap-4", className)} {...props} />
)
FileListHeader.displayName = "FileListHeader"

export const FileListIcon = ({ className, children, ...props }: ComponentProps<"div">) => (
  <div
    className={clsx(
      "flex size-10 items-center justify-center rounded-lg border bg-muted text-muted-foreground [&>svg]:size-5",
      className,
    )}
    {...props}
  >
    {children ?? <SvgUse icon="file-text" />}
  </div>
)
FileListIcon.displayName = "FileListIcon"

export const FileListInfo = ({ className, ...props }: ComponentProps<"div">) => (
  <div className={clsx("grid flex-1 gap-1", className)} {...props} />
)
FileListInfo.displayName = "FileListInfo"

export const FileListName = ({ className, ...props }: ComponentProps<"p">) => (
  <p className={clsx("text-sm font-medium leading-none tracking-tight", className)} {...props} />
)
FileListName.displayName = "FileListName"

export const FileListDescription = ({ className, ...props }: ComponentProps<"div">) => (
  <div
    className={clsx("flex items-center gap-2 text-xs text-muted-foreground", className)}
    {...props}
  />
)
FileListDescription.displayName = "FileListDescription"

export const FileListDescriptionSeparator = ({ children, ...props }: ComponentProps<"span">) => (
  <span {...props}>{children ?? "•"}</span>
)
FileListDescriptionSeparator.displayName = "FileListDescriptionSeparator"

export interface FileListSizeProps extends ComponentProps<"span"> {
  children: number
}

export const FileListSize = ({ children, ...props }: FileListSizeProps) => (
  <span {...props}>{prettyBytes(children)}</span>
)
FileListSize.displayName = "FileListSize"

export const FileListProgress = ({ className, ...props }: ComponentProps<typeof Progress>) => (
  <Progress className={clsx("h-2", className)} {...props} />
)
FileListProgress.displayName = "FileListProgress"

export const FileListDescriptionText = ({ className, ...props }: ComponentProps<"span">) => (
  <span className={clsx("flex items-center gap-1.5 [&>svg]:size-3", className)} {...props} />
)
FileListDescriptionText.displayName = "FileListDescriptionText"

export const FileListContent = ({ className, ...props }: ComponentProps<"div">) => (
  <div className={clsx("grid flex-1 gap-1", className)} {...props} />
)
FileListContent.displayName = "FileListContent"

export const FileListActions = ({ className, ...props }: ComponentProps<"div">) => (
  <div className={clsx("flex items-center gap-2", className)} {...props} />
)
FileListActions.displayName = "FileListActions"

export const FileListAction = ({
  className,
  variant = "outline",
  size = "1",
  ...props
}: ComponentProps<typeof Button>) => (
  <Button
    variant={variant}
    size={size}
    className={clsx("size-7 [&_svg]:size-3.5", className)}
    {...props}
  />
)
FileListAction.displayName = "FileListAction"