function Tick({ t, b, l, r, color = 'rgba(255,255,255,0.18)' }) {
  const s = {
    position: 'absolute', width: 10, height: 10,
    borderColor: color, borderStyle: 'solid', borderWidth: 0,
  };
  if (t) s.top = 6;
  if (b) s.bottom = 6;
  if (l) s.left = 6;
  if (r) s.right = 6;
  if (t && l) Object.assign(s, { borderTopWidth: 1, borderLeftWidth: 1 });
  if (t && r) Object.assign(s, { borderTopWidth: 1, borderRightWidth: 1 });
  if (b && l) Object.assign(s, { borderBottomWidth: 1, borderLeftWidth: 1 });
  if (b && r) Object.assign(s, { borderBottomWidth: 1, borderRightWidth: 1 });
  return <div style={s} />;
}

function Placeholder({
  label = 'photo', kind = 'photo', ratio, height,
  style = {}, accent = '#7a7a72', bg = '#0c0c0c',
  stripe = 'rgba(255,255,255,0.04)',
}) {
  return (
    <div style={{
      position: 'relative', width: '100%',
      height: height || undefined,
      aspectRatio: height ? undefined : (ratio || '16/9'),
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripe} 14px 15px)`,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        padding: '10px 12px',
        fontFamily: V3.mono, fontSize: 10,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        color: accent,
        ...style,
      }}>
        <span>[ {kind} ] {label}</span>
        <span style={{ opacity: 0.5 }}>work in progress</span>
      </div>
      <Tick t l /><Tick t r /><Tick b l /><Tick b r />
    </div>
  );
}