import React from 'react';
import { SLACK } from '../../lib/slack-colors';

interface SlackInputBarProps {
  scale: number;
}

export const SlackInputBar: React.FC<SlackInputBarProps> = ({ scale }) => {
  const paddingH = Math.round(16 * scale);
  const paddingV = Math.round(10 * scale);
  const borderRadius = Math.round(6 * scale);
  const iconSize = Math.round(18 * scale);
  const fontSize = Math.round(15 * scale);

  return (
    <div
      style={{
        padding: `${paddingV}px ${paddingH}px`,
        flexShrink: 0,
        backgroundColor: SLACK.bg,
      }}
    >
      <div
        style={{
          border: `1px solid ${SLACK.inputBorder}`,
          borderRadius,
          overflow: 'hidden',
          backgroundColor: SLACK.bg,
        }}
      >
        <div
          style={{
            padding: `${Math.round(8 * scale)}px ${Math.round(12 * scale)}px`,
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <span
            style={{
              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
              fontSize,
              color: SLACK.textSecondary,
              flex: 1,
            }}
          >
            Reply...
          </span>
        </div>

        <div
          style={{
            borderTop: `1px solid ${SLACK.separator}`,
            padding: `${Math.round(6 * scale)}px ${Math.round(10 * scale)}px`,
            display: 'flex',
            alignItems: 'center',
            gap: Math.round(12 * scale),
          }}
        >
          <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
            <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinejoin="round" />
            <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinejoin="round" />
          </svg>
          <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
            <line x1="19" y1="4" x2="10" y2="4" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
            <line x1="14" y1="20" x2="5" y2="20" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
            <line x1="15" y1="4" x2="9" y2="20" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
          </svg>
          <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
          </svg>
          <div style={{ flex: 1 }} />
          <div
            style={{
              width: Math.round(28 * scale),
              height: Math.round(28 * scale),
              borderRadius: Math.round(4 * scale),
              backgroundColor: SLACK.appBadgeBg,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <svg width={Math.round(14 * scale)} height={Math.round(14 * scale)} viewBox="0 0 24 24" fill="none">
              <path d="M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
};