import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import { useFullscreenContext } from '../Fullscreen';
import useTestIds from '../../hooks/useTestIds';
import { StyledCardMedia } from './CardMedia';
import { getCardTestIds } from './Card.test-ids';
export const StyledCard = styled.article(props => {
    const fullscreen = useFullscreenContext();
    const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
    const interactive = props.interactive
        ? css `
        &:hover {
          border: 0;
          box-shadow: 0 0 0 0.0625rem ${borderColor};
        }
        &:focus {
          border: 0;
          box-shadow: 0 0 0 0.125rem ${borderColor};
        }
      `
        : undefined;
    return css `
    background: ${background};

    &:focus {
      outline: none;
    }

    ${interactive}

    ${StyledCardMedia} {
      &:first-child img {
        border-radius: var(--container-border-radius, ${borderRadius})
          var(--container-border-radius, ${borderRadius}) 0 0;
      }
    }

    ${fullscreen?.[0]
        ? css `
          block-size: 100%;
          border-radius: 0;
        `
        : css `
          border-radius: var(--border-radius, var(--container-border-radius));
          --container-border-radius: ${borderRadius};
          * {
            --border-radius: calc(var(--container-border-radius) * 0.5);
          }
        `}
  `;
});
StyledCard.defaultProps = defaultThemeProp;
const Card = forwardRef(function Card({ children, as, onClick, interactive = false, testId, ...restProps }, ref) {
    const testIds = useTestIds(testId, getCardTestIds);
    const interactiveProps = {
        ...(onClick && {
            onClick,
            tabIndex: 0,
            role: 'button'
        }),
        ...(interactive && {
            tabIndex: 0
        }),
        interactive
    };
    return (_jsx(Flex, { "data-testid": testIds.root, role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
});
export default Card;
//# sourceMappingURL=Card.js.map