import React from 'react'
import styled from 'styled-components'

interface AttachemntProps {
  name: string
  onClick?: Function
  actions?: any
}

const AttachmentContainer = styled.div`
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
`

export default function Attachment(props: AttachemntProps) {
  return (
    <AttachmentContainer onClick={() => props.onClick && props.onClick()}>
      <div>{props.name}</div>
      <div onClick={(e) => e.stopPropagation()}>{props.actions}</div>
    </AttachmentContainer>
  )
}
