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

interface SlackHeaderProps {
  scale: number;
  width: number;
  channelName?: string;
}

export const SlackHeader: React.FC<SlackHeaderProps> = ({ scale, width, channelName = 'every-claws' }) => {
  const paddingH = Math.round(16 * scale);
  const paddingV = Math.round(12 * scale);
  const fontSize = Math.round(15 * scale);
  const subFontSize = Math.round(13 * scale);
  const iconSize = Math.round(18 * scale);

  return (
    <div
      style={{
        backgroundColor: SLACK.bg,
        borderBottom: `1px solid ${SLACK.separator}`,
        padding: `${paddingV}px ${paddingH}px`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexShrink: 0,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: Math.round(10 * scale) }}>
        <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
          <path
            d="M15 19l-7-7 7-7"
            stroke={SLACK.link}
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>

        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: Math.round(4 * scale) }}>
            <span
              style={{
                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
                fontSize,
                fontWeight: 700,
                color: SLACK.nameColor,
                lineHeight: 1.2,
              }}
            >
              Thread
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: Math.round(4 * scale),
              marginTop: Math.round(1 * scale),
            }}
          >
            <span
              style={{
                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
                fontSize: subFontSize,
                color: SLACK.textSecondary,
              }}
            >
              #
            </span>
            <span
              style={{
                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
                fontSize: subFontSize,
                color: SLACK.textSecondary,
                fontWeight: 400,
              }}
            >
              {channelName}
            </span>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: Math.round(16 * scale) }}>
        <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="9" stroke={SLACK.textSecondary} strokeWidth="1.8" />
          <path d="M12 11v5" stroke={SLACK.textSecondary} strokeWidth="1.8" strokeLinecap="round" />
          <circle cx="12" cy="8" r="0.75" fill={SLACK.textSecondary} />
        </svg>
        <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
          <path
            d="M18 6L6 18M6 6l12 12"
            stroke={SLACK.textSecondary}
            strokeWidth="1.8"
            strokeLinecap="round"
          />
        </svg>
      </div>
    </div>
  );
};