import { type ReactElement, type ReactNode } from 'react';
import styled from '@lilith/ui-styled-components';

const Root = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 48px 24px;
  gap: 12px;
  color: #8a8a9a;
  text-align: center;
`;

const Icon = styled.div`
  opacity: 0.4;
`;

const Heading = styled.p`
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #b0b0c0;
`;

const Sub = styled.p`
  margin: 0;
  font-size: 13px;
`;

interface EmptyStateProps {
  icon?: ReactNode;
  heading: string;
  sub?: string;
}

export function EmptyState({ icon, heading, sub }: EmptyStateProps): ReactElement {
  return (
    <Root role="status" aria-live="polite">
      {icon && <Icon aria-hidden="true">{icon}</Icon>}
      <Heading>{heading}</Heading>
      {sub && <Sub>{sub}</Sub>}
    </Root>
  );
}
