import { Box } from '@pikku/mantine/core';
import React from 'react';

interface CSSArrowSeparatorProps {
  /**
   * Color of the arrow (default: dimmed)
   */
  color?: string;
  /**
   * Size of the arrow in pixels (default: 20)
   */
  size?: number;
  /**
   * Margin around the component (default: 'lg')
   */
  margin?: string | number;
}

export const CSSArrowSeparator: React.FC<CSSArrowSeparatorProps> = ({
  color = 'var(--mantine-color-dimmed)',
  size = 20,
  margin = 'lg'
}) => {
  return (
    <Box style={{ margin }}>
      {/* Top horizontal line */}
      <Box
        style={{
          width: '100%',
          height: '1px',
          backgroundColor: color,
          marginBottom: '4px',
        }}
      />

      {/* Arrow pointing down */}
      <Box
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Box
          style={{
            width: 0,
            height: 0,
            borderLeft: `${size}px solid transparent`,
            borderRight: `${size}px solid transparent`,
            borderTop: `${size}px solid ${color}`,
          }}
        />
      </Box>

      {/* Bottom horizontal line */}
      <Box
        style={{
          width: '100%',
          height: '1px',
          backgroundColor: color,
          marginTop: '4px',
        }}
      />
    </Box>
  );
};