import { Calendar } from 'lucide-react';
import { getAvatarColor } from '@/lib/utils';

export const Header = () => {
  return (
    <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
      <div className="container max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
            <Calendar className="w-5 h-5 text-primary-foreground" />
          </div>
          <div>
            <h1 className="font-semibold text-foreground text-lg">Monadical</h1>
            <p className="text-xs text-muted-foreground">Calendar Coordination</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <div
            className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium text-white"
            style={{ backgroundColor: getAvatarColor("AR") }}
          >
            AR
          </div>
        </div>
      </div>
    </header>
  );
};