import React from 'react';
import styled from 'styled-components';
import { Avatar40 } from './Avatar';

export const AvatarWText = ({ image, name, email, initials }) => {
  return (
    <AvatarWrapperT>
      <Avatar40 image={image} alt={name} initials={initials} />
      <div className="name-info">
        <h4>{name}</h4>
        <p>{email}</p>
      </div>
    </AvatarWrapperT>
  );
};

export const AvatarWTextCheckbox = ({
  image,
  name,
  email,
  initials,
  category,
  type,
  onChange,
  ...props
}) => {
  return (
    <AvatarWTextCheck>
      <input type={type} onChange={onChange} category={category} {...props} />
      <AvatarWrapperT className="info-dtls">
        <Avatar40 image={image} alt={name} initials={initials} />
        <div className="name-info">
          <h4>{name}</h4>
          <p>{email}</p>
        </div>
      </AvatarWrapperT>
    </AvatarWTextCheck>
  );
};

export const AvatarWTextCheckboxStatus = ({
  name,
  type,
  title,
  value,
  checked,
  onChange,
}) => {
  return (
    <AvatarWTextCheck>
      <input
        type={type}
        onChange={onChange}
        checked={checked}
        value={value}
        name={name}
      />
      <AvatarWrapperT className="info-dtls" style={{ marginTop: '2rem' }}>
        <div className="name-info">
          <h4>{title}</h4>
        </div>
      </AvatarWrapperT>
    </AvatarWTextCheck>
  );
};

export const AvatarSVGWText = ({ svg, title, summary }) => {
  return (
    <AvatarWrapperT>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
      <div className="name-info">
        <h4 className="small-text">{title}</h4>
        <p>{summary}</p>
      </div>
    </AvatarWrapperT>
  );
};

const AvatarWrapperT = styled.div`
    position: relative;
    display: flex;
    align-items: center;
    svg{
        width: 40px;
        height: 40px;
    }
    .name-info{
        margin-left: 1rem;
        h4{
            font-family: var(--ff-medium);
            font-weight: 500;
            color: #0A1045;
            font-size: 1.6rem;
            text-transform: capitalize;
        }
        .small-text{
            font-size: 1.4rem; 
        }
        p{
            font-family: var(--ff-body);
            font-weight: 400;
            font-size: 1.4rem;

    }
    
    

`;
const AvatarWTextCheck = styled.label`
  position: relative;
  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: red;
    opacity: 0;
  }
  .info-dtls {
    padding-left: 4rem;
    &:before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border-radius: 2px;
      border: 1.5px solid #c5c9da;
      transition: background-color 0.3s ease;
      background: #c5c9da;
    }
  }
  input:checked ~ .info-dtls:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px;
    border: 1.5px solid #004bff;
  }
`;
