import React from 'react'
import { View } from '../view/View.jsx'

const VARIANT_DEFAULTS = {
  default: { surface: 'primary', roundness: 's', inset: 'l' },
  resume: { surface: 'primary', roundness: 'none', inset: 'l' },
  hero: { surface: 'hero', roundness: 'l', inset: 'xl' },
}

export const Card = ({
  variant = 'default',
  surface: surfaceProp,
  roundness: roundnessProp,
  inset: insetProp,
  ...props
}) => {
  const defaults = VARIANT_DEFAULTS[variant] ?? VARIANT_DEFAULTS.default
  const surface = surfaceProp ?? defaults.surface
  const roundness = roundnessProp ?? defaults.roundness
  const inset = insetProp ?? defaults.inset

  return (
    <>
      <style href="@ossy/design-system/card" precedence="high">
      {`
        [data-card] {
          overflow: hidden;
          box-sizing: border-box;
        }

        [data-card-variant="default"] {
          border: 0.5px solid var(--separator-primary);
        }

        [data-card-variant="resume"] {
          border-width: 0 1px 0 0;
          border-style: solid;
          border-color: var(--separator-primary);
          box-shadow: none;
        }

        [data-card-variant="hero"] {
          border: 1px solid transparent;
        }
      `}
      </style>
      <View
        data-card
        data-card-variant={variant}
        surface={surface}
        roundness={roundness}
        inset={inset}
        {...props}
      />
    </>
  )
}