import styled from "styled-components";

const Wrapper = styled.div<{ isSelected: boolean }>`
  background-color: ${(p) => p.theme.color.uiBackground02};
  padding: ${(p) => p.theme.spacing.xxs};
  cursor: pointer;
  outline: ${(p) => (p.isSelected ? `4px solid ${p.theme.color.interactive01}` : "none")};
  border-radius: ${(p) => p.theme.radii.s};
`;

const Content = styled.div`
  position: relative;
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  width: 100%;
  height: 100%;

  :before {
    content: "";
    border-radius: ${(p) => p.theme.radii.s};
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 2;
  }

  :hover:before {
    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    opacity: 1;
  }
`;

const ThumbnailWrapper = styled.div<{ isSimple: boolean }>`
  width: 100%;
  height: ${(p) => (p.isSimple ? "145px" : "349px")};
`;

const DataWrapper = styled.div<{ isGlobal: boolean }>`
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: ${(p) => p.theme.spacing.s};
  background-color: ${(p) => (p.isGlobal ? p.theme.color.uiBackground03 : p.theme.color.uiBackground02)};
  z-index: 1;
`;

const NameWrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

const Name = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const DataPack = styled.div`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-top: ${(p) => p.theme.spacing.xxs};
`;

const Thumbnail = styled.div<{ backgroundUrl: string | boolean }>`
  background: ${(p) => (p.backgroundUrl ? `url(${p.backgroundUrl}) no-repeat` : "")};
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 100%;
`;

const PlaceHolder = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${(p) => p.theme.color.uiBackground01};
  width: 100%;
  height: 100%;
`;

const GlobalTag = styled.div`
  position: absolute;
  bottom: 0;
  right: 0;
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textHighEmphasis};
  background: rgba(198, 174, 255, 0.57);
  padding: 2px 4px;
  border-radius: ${(p) => `${p.theme.radii.xs} 0 ${p.theme.radii.xs} 0`};
`;

const TypeTag = styled.div`
  display: flex;
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  background: ${(p) => p.theme.color.uiBackground01};
  flex-shrink: 0;
  padding: ${(p) => `${p.theme.spacing.xxs} ${p.theme.spacing.xs}`};
  border-radius: ${(p) => p.theme.radii.s};
  margin-left: ${(p) => p.theme.spacing.xs};

  svg {
    margin-right: ${(p) => p.theme.spacing.xxs};
    path {
      fill: ${(p) => p.theme.color.textMediumEmphasis};
    }
  }
`;

export {
	Wrapper,
	Content,
	ThumbnailWrapper,
	DataWrapper,
	NameWrapper,
	Name,
	DataPack,
	Thumbnail,
	PlaceHolder,
	GlobalTag,
	TypeTag,
};
