import { cn } from "@heroui/react"
import { motion } from "framer-motion"
import type { ReactNode } from "react"

interface CardProps {
  children?: ReactNode
  className?: string
  type?: string
  onClick?: () => void
}

const Card = ({ children, className, ...props }: CardProps) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3}}
      className={cn(
        "dark:bg-white/[3%] dark:border-white/[6%] px-3 py-3 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
      , className)}
      data-tauri-drag-region
      {...props}
    >
      {children}
    </motion.div>
  )
}

const CardHeader = ({ children }: CardProps) => {
  return (
    <div className="flex items-center gap-1.5 tracking-wide select-none">
      {children}
    </div>
  )
}

const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
  return (
    <div
      className={cn(
        "flex gap-1.5 items-center font-semibold",
        type === "menu" &&
          "transition cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 px-2 py-1 rounded-md active:scale-95",
        className,
      )}
      {...rest}
    >
      {children}
    </div>
  )
}

const CardTool = ({ children }: CardProps) => {
  return (
    <div className="flex items-center justify-end flex-grow gap-2">
      {children}
    </div>
  )
}

const CardBody = ({ children }: CardProps) => {
  return (
    <div className="w-full h-full text-sm tracking-wide text-zinc-800 dark:text-white">
      {children}
    </div>
  )
}

export { Card, CardHeader, CardIcon, CardTool, CardBody }