Untitled

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowDown, ArrowRight } from "lucide-react";

const AcetanilidePurificationFlowchart = () => {
  return (
    <div className="flex flex-col items-center space-y-4">
      <Card className="w-full max-w-4xl">
        <CardContent>
          <div className="text-center">
            <h2 className="text-2xl font-bold">Acetanilide Purification Flowchart</h2>
          </div>
          
          <div className="space-y-4 mt-6">
            {/* Step 1 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 1: Start with the Impure Sample</p>
              <p>Impurities: Methyl Red, Sand, Benzoic Acid, and Acetanilide</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 2 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 2: Dissolve in Hot Water</p>
              <p>Hot water dissolves Acetanilide, Methyl Red, and Benzoic Acid. Sand remains undissolved.</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 3 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 3: Add Activated Charcoal</p>
              <p>Charcoal adsorbs Methyl Red (colored impurity).</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 4 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 4: Perform Hot Gravity Filtration</p>
              <p>Filtrate: Contains Acetanilide and Benzoic Acid.</p>
              <p>Residue: Charcoal and Sand.</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 5 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 5: Cool the Filtrate Slowly</p>
              <p>Slow cooling forms Acetanilide crystals. Benzoic Acid remains dissolved in the mother liquor.</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 6 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 6: Suction Filtration</p>
              <p>Isolates Acetanilide crystals (solid) from the mother liquor (liquid).</p>
              <ArrowDown size={24} className="my-2" />
            </div>

            {/* Step 7 */}
            <div className="flex flex-col items-center">
              <p className="font-semibold">Step 7: Dry and Determine Melting Point</p>
              <p>Dry the purified Acetanilide and measure its melting point to assess purity.</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default AcetanilidePurificationFlowchart;