import styled, { css } from 'styled-components';
import { CTAButton } from './styles';

const skeletonBase = css`
  background: linear-gradient(
    to right,
    #f0f0f0 0%,
    #f5f2f2 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 800px 104px;
`;

interface SkeletonLineProps {
  width?: string;
  marginBottom?: string;
}

export const SkeletonLine = styled.div<SkeletonLineProps>`
  ${skeletonBase} height: 16px;
  width: ${props => props.width || '100%'};
  margin-bottom: ${props => props.marginBottom || '0'};
`;

export const SkeletonHeadline = styled.div`
  ${skeletonBase} height: 48px;
  width: 100%;
  margin-bottom: 16px;
`;

export const SkeletonPrice = styled.div`
  ${skeletonBase} height: 28px;
  width: 120px;
`;

export const SkeletonButton = styled(CTAButton)`
  ${skeletonBase} height: 48px;
  width: 100%;
  pointer-events: none;
  border: none;

  &:hover {
    transform: none;
  }
`;