import type { ComponentProps } from 'react'
import { cn } from '@/lib/utils'

export function BaseNode({ className, ...props }: ComponentProps<'div'>) {
  return (
    <div
      className={cn(
        'bg-card text-heading relative rounded-lg border border-default',
        'transition-colors hover:border-hover',
        'in-[.selected]:border-accent',
        className,
      )}
      tabIndex={0}
      {...props}
    />
  )
}

export function BaseNodeHeader({ className, ...props }: ComponentProps<'header'>) {
  return (
    <header
      {...props}
      className={cn('flex flex-row items-center gap-2 px-3 py-2', className)}
    />
  )
}

export function BaseNodeHeaderTitle({ className, ...props }: ComponentProps<'h3'>) {
  return (
    <h3
      data-slot="base-node-title"
      className={cn('select-none flex-1 text-xs font-semibold text-heading', className)}
      {...props}
    />
  )
}

export function BaseNodeContent({ className, ...props }: ComponentProps<'div'>) {
  return (
    <div
      data-slot="base-node-content"
      className={cn('flex flex-col gap-y-1 px-3 pb-2', className)}
      {...props}
    />
  )
}

export function BaseNodeFooter({ className, ...props }: ComponentProps<'div'>) {
  return (
    <div
      data-slot="base-node-footer"
      className={cn('flex flex-col items-center gap-y-1 border-t border-default px-3 pt-1.5 pb-2', className)}
      {...props}
    />
  )
}