import React from 'react'

type CardProps = React.PropsWithChildren

export const Card: React.FC<CardProps> = ({ children }) => {
  return (
    <article className="sb-unstyled uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:shadow-raising uy:rounded-200 uy:p-300 uy:flex uy:flex-col uy:gap-150">
      {children}
    </article>
  )
}

export const CardWithCover: React.FC<
  CardProps & { coverSrc: string; coverAlt: string }
> = ({ children, coverSrc, coverAlt }) => {
  return (
    <article className="sb-unstyled uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:shadow-raising uy:rounded-200 uy:flex uy:flex-col uy:overflow-hidden uy:sm:flex-row">
      <img
        src={coverSrc}
        alt={coverAlt}
        className="sb-unstyled uy:w-full uy:h-[180px] uy:object-contain uy:bg-blue-l3 uy:sm:object-fill uy:sm:h-full uy:sm:max-w-[200px]"
      />
      <section className="uy:p-300 uy:space-y-100">{children}</section>
    </article>
  )
}
export const CardHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
  return <header>{children}</header>
}

export const CardTitle: React.FC<React.PropsWithChildren> = ({ children }) => {
  return <h3 className="sb-unstyled uy:typography-h3 uy:m-0">{children}</h3>
}

export const CardContent: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  return <section className="uy:typography-body">{children}</section>
}

export const CardActions: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  return <footer className="uy:flex uy:flex-col uy:gap-100">{children}</footer>
}

export const Link: React.FC<React.ComponentProps<'a'>> = ({
  children,
  ...rest
}) => {
  return (
    <a
      className="uy:typography-action uy:block uy:text-content-primary uy:underline"
      {...rest}
    >
      {children}
    </a>
  )
}

type CardGridProps = {
  children: React.ReactNode
  cols?: number
}

export const CardGrid: React.FC<CardGridProps> = ({ children, cols = 2 }) => {
  return (
    <div
      className={`uy:grid uy:grid-cols-1 uy:gap-150 uy:md:grid-cols-${cols}`}
    >
      {children}
    </div>
  )
}