import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";

const FlightTwoWayCard = () => {
  return (
    <div className="flex flex-col gap-4">
      <Card className="flex items-center gap-4 bg-gray-50 p-4">
        <div className="flex flex-col">
          <div className="mb-1">
            <p className="text-sm font-medium">Gidiş</p>
          </div>
          <div className="flex items-center gap-1">
            <LIcon name="SendHorizontal" size={20} />
            {/* <img
              src={cardImageUrl}
              className={styles.image}
              alt="cardAltText"
          /> */}
            <div className="flex flex-col">
              <p className="text-sm font-semibold">Turkish Airlines</p>
              <p className="text-xs text-gray-500">TK283623</p>
            </div>
          </div>
        </div>

        <div className="ml-auto flex flex-col items-center gap-1">
          <p className="text-xs text-gray-500">2sa 15dk</p>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-1">
              <p className="text-base font-semibold">12:05</p>
              <p className="text-sm">SAW</p>
            </div>

            <LIcon name="Minus" size={20} />
            <LIcon name="Plane" size={24} />
            <LIcon name="MoveRight" size={20} />

            <div className="flex items-center gap-1">
              <p className="text-base font-semibold">22:10</p>
              <p className="text-sm">BUD</p>
            </div>
          </div>
          <p className="text-sm">2 Aktarma (HAM, OSL)</p>
        </div>
      </Card>
      <Card className="flex items-center gap-4 bg-gray-50 p-4">
        <div className="flex flex-col">
          <div className="mb-1">
            <p className="text-sm font-medium">Dönüş</p>
          </div>
          <div className="flex items-center gap-1">
            <LIcon name="SendHorizontal" size={20} />
            {/* <img
              src={cardImageUrl}
              className={styles.image}
              alt="cardAltText"
          /> */}
            <div className="flex flex-col">
              <p className="text-sm font-semibold">Turkish Airlines</p>
              <p className="text-xs text-gray-500">TK283623</p>
            </div>
          </div>
        </div>

        <div className="ml-auto flex flex-col items-center gap-1">
          <p className="text-xs text-gray-500">2sa 15dk</p>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-1">
              <p className="text-base font-semibold">12:05</p>
              <p className="text-sm">SAW</p>
            </div>

            <LIcon name="Minus" size={20} />
            <LIcon name="Plane" size={24} />
            <LIcon name="MoveRight" size={20} />

            <div className="flex items-center gap-1">
              <p className="text-base font-semibold">22:10</p>
              <p className="text-sm">BUD</p>
            </div>
          </div>
          <p className="text-sm">2 Aktarma (HAM, OSL)</p>
        </div>
      </Card>
    </div>
  );
};
export default FlightTwoWayCard;