import React from "react";
import { Avatar, Space, Typography, Tag } from "antd";
import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons";

import "./Card.css";

interface FlightProps {
  flight_code: string;
  status: string;
  origin: string;
  destination: string;
  departure_time: string;
  arrival_time: string;
  gate: string;
}

interface CardProps {
  flight: FlightProps;
}

const { Text } = Typography;

export const Card: React.FC<CardProps> = ({ flight }) => {
  return (
    <div className="flight-card">
      <Space size={8} align="center">
        <Avatar size={64} icon={<RightOutlined />} />
        <div>
          <Text strong>{flight.flight_code}</Text>
          <div>
            <Text type="secondary">
              {flight.origin} <SwapOutlined /> {flight.destination}
            </Text>
          </div>
        </div>
      </Space>
      <div className="flight-details">
        <Space size={8} direction="vertical">
          <Text strong>Status:</Text>
          <Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
        </Space>
        <Space size={8} direction="vertical">
          <Text strong>Departure:</Text>
          <Space size={2} align="baseline">
            <CalendarOutlined />
            {flight.departure_time}
          </Space>
        </Space>
        <Space size={8} direction="vertical">
          <Text strong>Arrival:</Text>
          <Space size={2} align="baseline">
            <CalendarOutlined />
            {flight.arrival_time}
          </Space>
        </Space>
        <Space size={8} direction="vertical">
          <Text strong>Gate:</Text>
          <Text>{flight.gate}</Text>
        </Space>
      </div>
    </div>
  );
};