import * as React from 'react'

import {merge} from '@/lib/utils'

function Card({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <article
      data-slot="card"
      className={merge(
        'bg-card text-card-foreground flex flex-col gap-4 rounded-lg py-4',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <header
      data-slot="card-header"
      className={merge(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-4 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <h3
      data-slot="card-title"
      className={merge(
        'leading-none font-semibold',
        `flex items-center gap-2`,
        className,
      )}
      {...props}
    />
  )
}

function CardDescription({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <p
      data-slot="card-description"
      className={merge('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={merge(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={merge('px-4 flex-auto', className)}
      {...props}
    />
  )
}

function CardFooter({className, ...props}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={merge('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
