import * as React from 'react';
import { color, bg, fg } from '@lendi-ui/color';
import styled from 'styled-components';

export const LegacyColorFunction = () => {
  const Circle = styled.div`
    width: 0;
    border-radius: 1em;
    border: 1em solid ${color('primary.500')};
  `;

  const TransparentCircle = styled.div`
    width: 0;
    border-radius: 1em;
    border: 1em solid ${color('primary.500', 0.6)};
  `;

  return (
    <>
      <Circle />
      <br />
      <TransparentCircle />
    </>
  );
};

export const LegacyBGFunctionSingleColor = () => {
  const Square = styled.div`
    width: 2em;
    height: 2em;
    ${bg('warn.500')}
  `;

  const TransparentSquare = styled.div`
    width: 2em;
    height: 2em;
    ${bg('warn.500', 0.6)}
  `;

  return (
    <>
      <Square />
      <br />
      <TransparentSquare />
    </>
  );
};

export const LegacyBGFunctionBreakpointColor = () => {
  const RainbowSquare = styled.div`
    width: 2em;
    height: 2em;
    ${bg({ mobile: 'error.500', tablet: 'success.500', desktop: 'info.500' })}
  `;

  const TransparentRainbowSquare = styled.div`
    width: 2em;
    height: 2em;
    ${bg({ mobile: 'error.500', tablet: 'success.500', desktop: 'info.500' }, 0.6)}
  `;

  return (
    <>
      <RainbowSquare />
      <br />
      <TransparentRainbowSquare />
      Resize the window to see the square change color 👉
    </>
  );
};

export const LegacyFGFunctionSingleColor = () => {
  const WarningText = styled.span`
    ${fg('warn.500')}
  `;

  const TransparentWarningText = styled.span`
    ${fg('warn.500', 0.6)}
  `;

  return (
    <>
      <WarningText>⚠️ Is there something wrong?</WarningText>
      <br />
      <TransparentWarningText>⚠️ Is there something wrong with transparent text?</TransparentWarningText>
    </>
  );
};

export const LegacyFGFunctionBreakpointColor = () => {
  const RainbowText = styled.span`
    ${fg({ mobile: 'error.500', tablet: 'success.500', desktop: 'info.500' })}
  `;

  const TransparentRainbowText = styled.span`
    ${fg({ mobile: 'error.500', tablet: 'success.500', desktop: 'info.500' }, 0.6)}
  `;

  return (
    <>
      <RainbowText>Resize the window to see the text change color 👉</RainbowText>
      <br />
      <TransparentRainbowText>Resize the window to see the transparent text change color 👉</TransparentRainbowText>
    </>
  );
};