import styled from '@emotion/styled';

import { CloseIcon } from '@/icons';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';

const RenderedClipNotification = styled.div`
  position: absolute;
  top: 20px;
  left: 50%;
  max-width: 100%;
  transform: translateX(-50%);
  background-color: var(--color-grass-200);
  border: 1px solid var(--color-accent-success);
  padding: 8px 12px;
  border-radius: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 400px;
`;

const Text = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
`;

const Headline = styled.div`
  font-size: 16px;
  font-weight: 600;
  color: var(--color-foreground-primary);
`;

const Content = styled.div`
  font-size: 14px;
  a {
    text-decoration: underline;
  }
`;

export default function StudioNotification({
  title,
  content,
  buttonContent,
  onClick,
  href,
  onClose,
}: {
  title: React.ReactNode;
  content: React.ReactNode;
  buttonContent: React.ReactNode;
  onClick?: () => void;
  href?: string;
  onClose: () => void;
}) {
  return (
    <RenderedClipNotification>
      <Text>
        <Headline>{title}</Headline>
        <Content>{content}</Content>
      </Text>
      <Button
        onClick={onClick}
        href={href}
        variant={ButtonVariant.Secondary}
        shape={ButtonShape.Pill}
        target='_blank'
      >
        <span className='whitespace-nowrap'>{buttonContent}</span>
      </Button>
      <Button
        onClick={onClose}
        className='-ml-2 bg-transparent'
        icon={<CloseIcon />}
        shape={ButtonShape.Pill}
        size={ButtonSize.Small}
      />
    </RenderedClipNotification>
  );
}