import { Button, Typography } from 'antd';
import { ArrowLeftOutlined, StopOutlined } from '@ant-design/icons';
import SessionTimer from './SessionTimer';

interface CanvassHeaderProps {
  cutName: string;
  startedAt: string;
  onBack: () => void;
  onEndSession: () => void;
  endingSession: boolean;
}

export default function CanvassHeader({
  cutName,
  startedAt,
  onBack,
  onEndSession,
  endingSession,
}: CanvassHeaderProps) {
  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: 48,
        zIndex: 1000,
        background: 'linear-gradient(135deg, #005a9c 0%, #007acc 100%)',
        display: 'flex',
        alignItems: 'center',
        padding: '0 8px',
        gap: 8,
      }}
    >
      <Button
        type="text"
        icon={<ArrowLeftOutlined style={{ color: '#fff' }} />}
        onClick={onBack}
        size="small"
      />
      <Typography.Text
        strong
        style={{ color: '#fff', fontSize: 14, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
      >
        {cutName}
      </Typography.Text>
      <SessionTimer startedAt={startedAt} />
      <Button
        danger
        size="small"
        icon={<StopOutlined />}
        onClick={onEndSession}
        loading={endingSession}
      >
        End
      </Button>
    </div>
  );
}
