import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

export const Card = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <div class={cn('panel', local.class)} {...rest} />
}

export const CardElevated = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <div class={cn('panel-elevated', local.class)} {...rest} />
}

export const CardGlass = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <div class={cn('panel-glass', local.class)} {...rest} />
}

export const CardHeader = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <div class={cn('flex items-center justify-between gap-4 px-6 pt-6', local.class)} {...rest} />
}

export const CardTitle = (props: JSX.HTMLAttributes<HTMLHeadingElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <h3 class={cn('text-xl font-semibold text-fg tracking-tight', local.class)} {...rest} />
}

export const CardDescription = (props: JSX.HTMLAttributes<HTMLParagraphElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <p class={cn('text-sm text-muted-fg mt-1.5', local.class)} {...rest} />
}

export const CardContent = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return <div class={cn('px-6 pb-6', local.class)} {...rest} />
}
