import styled from 'styled-components';
import { AssetDataCardProps, AssetDataCardVariant } from './interfaces';

type WrapperProps = Pick<AssetDataCardProps, 'variant'> & { hasLink: boolean };

export const Wrapper = styled.a<WrapperProps>`
  position: relative;
  background: #fff;
  width: ${({ variant }) =>
    variant === AssetDataCardVariant.DEFAULT ? '100%' : '414px'};
  display: flex;
  flex-direction: column;
  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
  box-shadow: ${({ variant }) =>
    variant === AssetDataCardVariant.DEFAULT
      ? 'inset 0px 2px 14px rgba(0, 0, 0, 0.04)'
      : '0px 8px 14px rgba(0, 0, 0, 0.08)'};
  border-radius: 4px;
  padding: ${({ variant }) =>
    variant === AssetDataCardVariant.DEFAULT ? '8px' : '16px 12px'};
  gap: 16px;
  cursor: ${({ hasLink, variant }) =>
    hasLink && variant === AssetDataCardVariant.DEFAULT
      ? 'pointer'
      : 'default'};
`;

export const Row = styled.div<{ justifyContent?: string; margin?: string }>`
  display: flex;
  align-items: center;
  justify-content: ${({ justifyContent }) => justifyContent || 'space-between'};
  margin: ${({ margin }) => margin || 0};
`;

export const Column = styled.div<{
  gap?: number;
  margin?: string;
  align?: 'left' | 'right';
}>`
  display: flex;
  flex-direction: column;
  gap: ${({ gap }) => `${gap || 0}px`};
  margin: ${({ margin }) => margin || 0};
  align-items: ${({ align }) => (align === 'right' ? 'flex-end' : 'start')};
`;

export const AssetPreviewContainer = styled.div`
  background: ${({ theme }) => theme.colors.neutral[25]};
  box-shadow: inset 0px 2px 14px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  img {
    max-width: calc(100% - 24px);
    max-height: calc(100% - 16px);
  }

  @media (max-width: ${({ theme }) => theme.screens.mobile}) {
    height: 190px;
  }
`;

export const Description = styled.div`
  display: flex;
  flex-direction: column;
  background: ${({ theme }) => theme.colors.primary[100]};
  box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  padding: 12px;

  p {
    word-break: normal;
    overflow-wrap: anywhere;
  }
`;

export const LinkBadge = styled.div`
  width: min-content;
  display: flex;
  align-items: center;
  background: ${({ theme }) => theme.colors.neutral[50]};
  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
  border-radius: 23px;
  padding: 4px 8px;
  gap: 4px;

  span {
    max-width: 260px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
`;

export const CommunityLibraryHeader = styled.div`
  margin-left: 8px;
  display: flex;
  flex-direction: row;
`;

export const CommunityLibraryIconWrapper = styled.div`
  margin-right: 4px;
`;