import { Button } from "@ax/components";
import React from "react";
import styled from "styled-components";

const NoteWrapper = styled.div`
  margin-top: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const DataWrapper = styled.div`
  display: flex;
  align-items: center;
`;

const IconWrapper = styled.div`
  width: ${(p) => p.theme.spacing.m};
  height: ${(p) => p.theme.spacing.m};
  svg {
    width: ${(p) => p.theme.spacing.m};
    height: ${(p) => p.theme.spacing.m};
    path {
      fill: ${(p) => p.theme.color.textMediumEmphasis};
    }
  }
`;

const DataTitle = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.color.textHighEmphasis};
  margin-left: ${(p) => p.theme.spacing.xs};
`;

const StyledButton = styled((props) => <Button {...props} />)`
  margin-left: auto;
`;

const FieldWrapper = styled.div`
  margin-top: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.s};
  background-color: ${(p) => p.theme.color?.uiBackground03};
  padding: ${(p) => p.theme.spacing?.s};
  border-radius: ${(p) => p.theme.radii?.s};
  ${(p) => p.theme.textStyle?.uiXS};
  color: ${(p) => p.theme.color?.textMediumEmphasis};
`;

const Link = styled.span`
  cursor: pointer;
  font-weight: bold;
  color: ${(p) => p.theme.color?.interactive01};
`;

export { NoteWrapper, FieldWrapper, DataWrapper, IconWrapper, DataTitle, StyledButton, Link };
