veza/apps/web/src/features/live/pages/live-page/LiveViewStreamInfo.tsx

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Heart, Share2, DollarSign } from 'lucide-react';
import type { LiveStream } from '@/types';

interface LiveViewStreamInfoProps {
  stream: LiveStream;
  onStreamerClick?: () => void;
  onFollow?: () => void;
  onDonate?: () => void;
  onShare?: () => void;
}

export function LiveViewStreamInfo({
  stream,
  onStreamerClick,
  onFollow,
  onDonate,
  onShare,
}: LiveViewStreamInfoProps) {
  return (
    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
    <div className="flex justify-between items-start">
      <div className="flex gap-4">
        <div className="w-12 h-12 rounded-full bg-gradient-neon p-0.5">
          <div className="w-full h-full rounded-full bg-[var(--sumi-surface-inset)] border-2 border-border flex items-center justify-center">
            <span className="text-xs font-bold text-muted-foreground">DJ</span>
          </div>
        </div>
        <div>
          <h1 className="text-3xl font-bold text-foreground tracking-tight">{stream.title}</h1>
          <p
            className="text-primary font-medium cursor-pointer hover:underline"
            onClick={onStreamerClick}
          >
            {stream.streamer}
          </p>
          <div className="flex gap-2 mt-2">
            {stream.tags.map((tag) => (
              <Badge key={tag} label={tag} variant="terminal" />
            ))}
          </div>
        </div>
      </div>
      <div className="flex gap-4">
        <Button
          variant="secondary"
          icon={<Heart className="w-4 h-4" />}
          onClick={onFollow}
        >
          FOLLOW
        </Button>
        <Button
          variant="primary"
          icon={<DollarSign className="w-4 h-4" />}
          onClick={onDonate}
        >
          DONATE
        </Button>
        <Button
          variant="ghost"
          icon={<Share2 className="w-4 h-4" />}
          onClick={onShare}
        >
          SHARE
        </Button>
      </div>
    </div>
    </Card>
  );
}