import { ArrowLeft } from 'lucide-react';

type LabelVariant = 'ink' | 'red';

interface SectionBannerLink {
  text: string;
  to: string;
}

interface SectionBannerProps {
  label: string;
  labelVariant?: LabelVariant;
  link?: SectionBannerLink;
}

export function SectionBanner({
  label,
  labelVariant = 'ink',
  link,
}: SectionBannerProps) {
  const labelBg = labelVariant === 'red' ? 'var(--red)' : 'var(--ink)';

  return (
    <div
      style={{
        borderBottom: '1px solid var(--rule-thin)',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'stretch',
        gap: 0,
      }}
    >
      {/* Label block */}
      <span
        style={{
          backgroundColor: labelBg,
          color: 'var(--paper)',
          fontSize: '9px',
          fontWeight: 900,
          letterSpacing: '3px',
          textTransform: 'uppercase',
          padding: '6px 14px',
          display: 'flex',
          alignItems: 'center',
          flexShrink: 0,
          lineHeight: 1,
        }}
      >
        {label}
      </span>

      {/* Rule fill */}
      <div
        style={{
          flex: 1,
          borderBottom: 'none',
          alignSelf: 'center',
          borderTop: '1px solid var(--rule-thin)',
          marginBottom: '-1px',
        }}
        aria-hidden="true"
      />

      {/* Optional link */}
      {link && (
        <a
          href={link.to}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '5px',
            fontSize: '10px',
            fontWeight: 700,
            letterSpacing: '1px',
            color: 'var(--ink)',
            textDecoration: 'none',
            padding: '6px 0 6px 4px',
            flexShrink: 0,
            cursor: 'pointer',
            transition: 'color 150ms',
          }}
          onMouseEnter={e => (e.currentTarget.style.color = 'var(--red)')}
          onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink)')}
        >
          {link.text}
          <ArrowLeft size={12} strokeWidth={2.5} />
        </a>
      )}
    </div>
  );
}
